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;

Answer 2

如果您取出display: inline-block;和float: left;行，它会按照您想要的方式显示。

Answer 3

不需要CSS，因为您有时使用表格和表格

这是你的表

<table width="200">
    <tr>
        <th colspan="4" align="center" valign="middle">Batch 2012</th>
    </tr>
    <tr>
        <td align="center" valign="middle"> Hi </td> 
        <td align="center" valign="middle"> Hi </td>
        <td align="center" valign="middle"> Hi </td>
        <td align="center" valign="middle"> Hi </td>
    </tr>
    </table>

以下是您的演示

https://jsfiddle.net/1zhdLb55/1/

无法垂直对齐TD内的文本

3 个答案: