0

我vertical-align: middle为所有 td 添加了天数：

#calendar td {
    vertical-align: middle !important;
}

但这不适用于第一列的响应式网页：在此处输入图像描述 我该如何解决？

我尝试在 % 和 em 中添加 margin-top，它适用于平板电脑，机器人不适用于 PC 浏览器。

更新：在 jsfiddle 上添加代码：http: //jsfiddle.net/8ctRu/

HTML

<div id='calendar'></div>

CSS

#calendar td {
    vertical-align: middle !important;
    border: 1px solid #000;
}
.fc {
    text-align: center !important;
}

.fc td {
    padding: 0;
    vertical-align: middle !important;
}

jQuery

$('#calendar').fullCalendar({
    header: {
        left: 'prev',
        center: 'title',
        right: 'next'
    },
    dayClick: function(date, allDay, jsEvent, view) {
        var now = new Date();

        if (date.setHours(0,0,0,0) > now.setHours(0,0,0,0)){
            $(this).toggleClass("blackAndWhite");
        } else {
            $(tempVar).css({
                'background-color':'white',
                'color' : '#000'
            });
        }

    }
});
4

6 回答 6

1

vertical-align: middle;没有做它的工作，因为内部div是td由min-heightJavaScript 设置的。

将line-height（等于计算的min-height）与 thediv一起添加min-height，内容将正确对齐。

您可以使用以下代码进行操作。

function setLineHeight() {
    var body = $(document).find('tbody');
    var bodyRows = body.find('tr');
    var bodyFirstCells = bodyRows.find('td:first-child');
    var cell;
    bodyFirstCells.each(function (i, _cell) {
        if (i < 7) {
            cell = $(_cell);
            var minHeight = cell.find('> div').css('min-height'); /* get computed min-height value */
            cell.find('> div').css(
                'line-height',
            minHeight); /* set the obtained min-height as line-height */
        }
    });

}

$(document).ready(function () {
    setTimeout(setLineHeight, 1000);
});
$(window).resize(function () {
    setTimeout(setLineHeight, 1000); /* to make sure that the plugin calculates the min-height before calling our function */
});

演示小提琴| 全屏结果

注意：更好的选择是创建插件的自定义版本并line-height在其中设置。

于 2013-10-11T15:43:16.993 回答
1

这将在没有 JS 的情况下垂直居中。但不确定它会对事件产生什么影响。

添加到您的演示：http: //jsfiddle.net/8ctRu/10/ 

.fc-day:first-child > div:first-child {
    position: relative;
}

.fc-day:first-child > div:first-child .fc-day-number {
    position: absolute;
    top: 50%;
    left: 0px;
    right: 0px;
    text-align: center;
    margin-top: -.5em;
    line-height: 1em;
}
于 2014-05-26T19:00:04.743 回答
1

仅使用 CSS

.fc-content-skeleton>table{
    margin-top: 4%;
}
.fc-content-skeleton>table>thead>tr>td{
    text-align: center;
}
.fc-ltr .fc-basic-view .fc-day-top .fc-day-number{
    float: none;
}
于 2019-01-29T13:38:24.437 回答
1

只需为此类 .fc-day-number 添加下面的 css

.fc-day-number { 
    float: none !important;
    margin: 0 auto !important;
 }
于 2020-07-01T06:38:12.857 回答
0

min-height:64px把你甩了。。

放在height:64px容器上<td>

于 2013-10-11T15:35:02.847 回答
-1

您可以删除垂直对齐，并添加padding-top或margin-top

于 2013-10-11T15:20:42.717 回答