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

Question

我在日历单元格中有完整日历的事件限制链接，我试图在CSS中垂直对齐它。

这是我的js小提琴here

的链接

看起来fullcalendar围绕作为eventLimit链接的锚标记包装了一个div，理想情况下它是垂直对齐的最佳元素，但我不知道我是否可以在CSS中访问它。也许我可以用fullRalendar以某种方式使用eventRender？

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

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

您需要设置表格高度以匹配其容器的高度

尝试将CS​​S更新为：

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

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

here是小提琴;

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