I added vertical-align: middle for all td with day number:

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

but this don't work for responsive web page for first column: How I can fix it?

I try added margin-top in % and em, its work for tablet, bot don't work on PC browser.

UPDATE: added code on jsfiddle: /

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

    }
});

I added vertical-align: middle for all td with day number:

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

but this don't work for responsive web page for first column: How I can fix it?

I try added margin-top in % and em, its work for tablet, bot don't work on PC browser.

UPDATE: added code on jsfiddle: http://jsfiddle/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'
            });
        }

    }
});

• javascript
• jquery
• html
• fullcalendar

• 1 please post the HTML code. – Rohit Jain Commented Oct 11, 2013 at 15:16
• added code: jsfiddle/8ctRu – Gene Commented Oct 11, 2013 at 15:25
• 2 This is a JavaScript problem. If you look at the div inside the td, a min-height is being applied via JS. This is preventing vertical-align from working the way you expected. – cimmanon Commented Oct 11, 2013 at 15:35
• @Gene: Sorry the previous version of my answer had an error. I must have wrote that delay part half asleep. Check the updated version. – Harry Commented Oct 12, 2013 at 3:51

6 Answers 6

The vertical-align: middle; is not doing its job because the div inside the td is being set a min-height by the JavaScript.

Add line-height (equal to the puted min-height) to the div along with the min-height and the content will get aligned properly.

You can do it using the below code.

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 puted 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 */
});

Demo Fiddle | Full Screen Result

Note: Even better option would be to create a custom version of the plugin and set the line-height from within it.

This will center the day vertically without JS. Not sure what it'll do to the events though.

Added to your demo: http://jsfiddle/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;
}

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

Just add below css for this class .fc-day-number

.fc-day-number { 
    float: none !important;
    margin: 0 auto !important;
 }

min-height:64px is throwing you off..

Put the height:64px on the container <td>

You can remove the vertical align, and add padding-top or margin-top