html - 无法垂直对齐 TD 内的文本

Question

我试图在我的 TD 中将文本垂直居中。

我尝试了以下方法，但无法达到预期的效果。

<table class="student_table">
    <tr>
        <th class="class_box" colspan="4">Batch 2012</th>
    </tr>
    <tr class="batch_header">
        <td> Hi </td> <!--Have to center this-->
        <td> Hi </td>
        <td> Hi </td>
        <td> Hi </td>
    </tr>

.batch_header{
    width: 140px;
    float: left;
}
.batch_header td{
    width:30px;
    height:25px;
    background-color:#EEE;
    margin:0px;
    padding:2.5px;
    border:0px;
    float:left;
    font-weight: bold;
    font-size: smaller;
    text-align:center;
    display: inline-block;
    vertical-align: middle; <!-- < This is not working-->
}

Answer 1

只是删除

float:left;

来自

.batch_header td{ }

.batch_header{
    width: 140px;
    float: left;
}
.batch_header td{
    width:30px;
    height:25px;
    background-color:#EEE;
    margin:0px;
    padding:2.5px;
    border:0px;
    font-weight: bold;
    font-size: smaller;
    text-align:center;    
    vertical-align: middle; <!-- < This is not working-->
}

<table class="student_table" border = 1>
    <tr>
        <th class="class_box" colspan="4">Batch 2012</th>
    </tr>
    <tr class="batch_header">
        <td> Hi </td> <!--Have to center this-->
        <td> Hi </td>
        <td> Hi </td>
        <td> Hi </td>
    </tr>
</table>

JSFiddle Demo

注意:出于可见性目的，我已经为表格设置了边框。

更新:

请参阅Demo2 Here

刚刚在 CSS 中添加了 line-height: 1.9;