javascript - vertical-align: middle for fullcalendar レスポンシブ Web ページの曜日番号

Question

vertical-align: middleすべての td に日番号を追加しました:

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

しかし、これは最初の列のレスポンシブ Web ページでは機能しません: どうすれば修正できますか?

% と 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'
            });
        }

    }
});

Answer 1

これにより、JS なしで 1 日が垂直方向に中央揃えになります。しかし、それがイベントに何をするかはわかりません。

デモに追加: 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;
}

Answer 2

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;
}

Answer 3

垂直方向の配置を削除して、padding-topまたは追加できますmargin-top