Vertically aligning text in a table's cell - css

Question

I have an event limit link inside a day cell for a full calendar and I'm trying to vertically align it in CSS.
Here is a link to my js fiddle here
It looks like fullcalendar wraps a div around the anchor tag that is the eventLimit link, that ideally would be the best element to vertically align but I don't know if I can access it in CSS. Maybe I can in fullcalendar somehow with eventRender??
Can this be done easily in CSS or is there a better way to do itusing some way in full calendar?
$(document).ready(function() {
$('#calendar').fullCalendar({
header: {
left: 'prev,next today',
center: 'title',
right: ''
},
//defaultDate: '2014-06-12',
defaultView: 'basicWeek',
editable: false,
height: 174,
eventLimit: 1,
eventLimitText: function (numEvents) {
return numEvents;
},
events: [
{
title: 'Event',
start: '2017-09-18'
},
{
title: 'Event',
start: '2017-09-18'
}
]
});
});

Answer 1

You need to set your table height to match the height of its container
Try updating your CSS to this:
td.fc-more-cell {
text-align: center;
font-size: 2.3em;
vertical-align: middle
}
.fc-content-skeleton,
table,
tr {
height: 100%;
}

Answer 2

Here you go with. check the JS Fiddle
http://jsfiddle.net/rbynbu4z/1/
I added the below code
.fc-row .fc-content-skeleton,
.fc-row .fc-content-skeleton td,
.fc-row .fc-content-skeleton table,
.fc-row .fc-content-skeleton tr{
height: 100%;
vertical-align: middle;
}
.fc-row .fc-content-skeleton td div {
display: inline-block;
line-height: 100%;
}

Answer 3

Use line height for the anchor, it will vertically align the text inside the cell.
here is the fiddle;
td.fc-more-cell {
text-align: center;
font-size: 2.3em;
}
td.fc-more-cell a{
line-height:85px;
}