为什么“垂直对齐中间”不能与此表格单元一起使用？

Question

I am beginning a new project and I have vertically-aligned content in <td> cells before, so this error came as a bit unexpected. Also, any research I do (that I have done before, also) yields the information that I would expect (can't apply vertical-align to a block element, apply display: table-cell; , etc.). However:

I have the following table in my simple html document:

<table id="headingTable">
    <tr>
        <td id="dateHolder">2013-07-24 15:03:18</td>
        <td><h2>City of Okmulgee Authorized Leave Request</h2></td>
        <td><button type="button" class="printBtn">Print Form</button></td>
    </tr>
</table>

With this applicable CSS:

table#headingTable
{
    width: 100%;
}

td
{
    vertical-align: middle;
}

h2
{
    font-family: Tahoma, Geneva, sans-serif;
    text-align: center;
}

.printBtn
{
    white-space: nowrap;
    font-family: "Segoe UI", Verdana, Helvetica, Sans-Serif;
    font-size: 1em;
    border-width: 3px;
    border-color: #959595;
    cursor: pointer;
}

#dateHolder
{
    float: left;
}

The <td id="dateHolder"> cell should show the date and time in the middle, aligned with the next two table cells for that row, but you can see here that it does not:

I would like to think that this question is beneath me, but it is apparently not, because I was led to believe that as long as it was an inline element, or at least an element with display: table-cell; , but especially if it IS a table-cell (ie, a <td> element), then vertical-align should be applied as specified in the CSS.

I'm sure I could get something working, (using positioning, line-height adjustments, padding, etc.) but the fact that I can't seem to grasp why it doesn't work with the current rules I have set, just begs an answer for my education's sake.

Things I have tried

Using <span> inside the <td id="dateHolder"> element and targeting that with CSS, instead of just the text node.

Setting a height (by px ) to all of the <td> elements in the <tr> row.

Adjusting the line-height of all of the <td> elements in the <tr> row.

Things You May Want To Know:

I have absolutely NO inline CSS. All of the CSS is in the same external document.

In case you feel you need to view it, here is the entire CSS file (this site is still very new, so there's isn't much there yet):

body
{
    width: 100%;
    margin: auto;
    background-color: #464646;
}

div#mainWrapper
{
    background-color: #dfdfdf;
    width: 900px;
    border-style: ridge;
    border-width: 5px;
    border-color: #808080;
    margin: auto;
    padding: 10px 20px 0px;
    margin-top: 8px;
    text-align: center;
    padding-bottom: 20px;
}

table#headingTable
{
    width: 100%;
}

td
{
    vertical-align: middle;
}

h2
{
    font-family: Tahoma, Geneva, sans-serif;
    text-align: center;
}

table#mainTable
{
    width: 95%;
    margin: auto;
    margin-top: 40px;
    border-collapse: collapse;
    border: 2px solid #000;
}

td.leaveSection
{
    width: 50%;
    margin: auto;
    white-space: nowrap;
}

.printBtn
{
    white-space: nowrap;
    font-family: "Segoe UI", Verdana, Helvetica, Sans-Serif;
    font-size: 1em;
    border-width: 3px;
    border-color: #959595;
    cursor: pointer;
}

#dateHolder
{
    float: left;
}

div.bigLblWrapper
{
    position: relative;
    left: -50px;
    display: inline-block;
    text-align: right;
    width: 80%;
}

label.bigLbl
{
    font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
    font-size: 15px;
    font-weight: bold;
}

input.leaveTypeRadio
{
    position: relative;
    left: -35px;
}

input[readonly]
{
    background-color: #c6ebff;
}

Lastly, I just want to stress that I am not as concerned with a solution as to how to do this (again, I'm sure I could make something work), as I am interested in an explanation as to what is disallowing me to establish the styling changes I want based on the rules that I have set.

Answer 1

You're floating the <td> in the last rule of your CSS - this will automatically make an element block-level, and vertical-align will not work as it only applies to elements in the inline-formatting context. You should instead use text-align to align the <td> content instead of floating #dateHolder

http://jsfiddle.net/LRMrv/