垂直对齐表格单元格中的文本

Question

我在一个日历中有一个事件限制链接，用于完整日历，我试图在CSS中垂直对齐。

这是我的JS小提琴的链接

看起来FullCalendar围绕着EventLimit链接包裹一个div，理想情况下，这将是垂直对齐的最佳元素，但我不知道我是否可以在CSS中访问它。也许我可以在Eventrender上以某种方式全面地进行？

可以在CSS中轻松完成，还是有更好的方法在完整日历中以某种方式进行IT？

$(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

您需要设置桌子高度以匹配其容器的高度

尝试更新您的CSS：

td.fc-more-cell {
  text-align: center;
  font-size: 2.3em;
  vertical-align: middle
}
.fc-content-skeleton,
table,
tr {
  height: 100%;
}

Answer 2

在这里。检查JS小提琴http://jsfiddle.net/rbynbu4z/1/

我添加了以下代码

.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

使用锚点的线高度，它将垂直对齐单元内的文本。

这是小提琴;

    td.fc-more-cell {
        text-align: center;
        font-size: 2.3em;
}
td.fc-more-cell a{
  line-height:85px;
}