文章/答案/技术大牛

发布

社区首页 >问答首页 >无法垂直对齐TD内的文本

问无法垂直对齐TD内的文本
EN

Stack Overflow用户

提问于 2015-03-05 06:52:40

回答 3查看 567关注 0票数 0

我正试图在我的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-->
}

html

css

回答 3

Stack Overflow用户

回答已采纳

发布于 2015-03-05 06:58:09

只要移除

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演示

注:为了便于看到，我已将边框交给了表格。

更新：

请参阅Demo2在这里

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

票数 1

Stack Overflow用户

发布于 2015-03-05 07:04:59

如果您去掉display: inline-block;和float: left;行，它就会看起来像您想要的那样。

票数 0

Stack Overflow用户

发布于 2015-03-05 07:18:59

不需要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/

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/28871696

复制

相似问题

问无法垂直对齐TD内的文本
EN

回答 3

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问无法垂直对齐TD内的文本EN

回答 3

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问无法垂直对齐TD内的文本
EN