如何在表格单元格内垂直对齐 div？

Posted 2023-03-05

【中文标题】如何在表格单元格内垂直对齐 div？

【英文标题】：How do I vertically align a div inside a table cell?

【发布时间】：2012-06-14 23:15:39

【问题描述】：

如何使表格单元格内的 div 垂直居中？

html：

<tr class="rowClass">
    <td class="cellClass">
        <div class="divClass">Stuff</div>
    </td>
</tr>

CSS：

.rowClass 
    vertical-align:middle !important;
    height:90px;


.cellClass 
    vertical-align:middle !important;
    height:90px;


.divClass 
    vertical-align:middle !important;
    height:90px;

我知道类定义是多余的，但我一直在尝试很多不同的东西。为什么解决方案（无论是什么）不直观。我尝试过的“显而易见”的解决方案都不起作用。

【参考方案1】：

.divClass margin-top:auto;

HTML

<table border=1>
<tr class="rowClass">
<td class="cellClass">
    <div class="divClass">Stuff</div>
</td>
</tr>
</table>

CSS

.rowClass 
vertical-align:middle !important;
height:90px;


.cellClass 
vertical-align:middle !important;
height:90px;


.divClass 
margin-top:auto; 
 ​

Live Example

【讨论】：

将您的 Fiddle 内容放入您的答案中，并解释代码的作用。另见meta.stackexchange.com/questions/8231

【参考方案2】：

如果没有任何 css 本身，您可以使用 valign="middle" 尝试此代码。

<table  border="1" cellspacing="0" cellpadding="0">
  <tr>
    <th  align="center" valign="middle" scope="col">

    <div>Hello</div>
    </th>
  </tr>
</table>

【讨论】：

valign 在 HTML5 中不受支持

【参考方案3】：

.divClass 中无需定义height。像这样写：

.cellClass 
    vertical-align:middle;
    height:90px;
    border:1px solid red;

查看http://jsfiddle.net/ncrKH/

【讨论】：

谢谢！我有 float:left 搞砸了一切。

是的，浮动和显示：块效果表功能。