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

Question

我应该如何在表格单元格内垂直居中一个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;
}

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

- John Anderson

Answer 1

不需要在 .divClass 中定义 height。像这样编写：

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

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

- sandeep

---

谢谢！我之前使用了 float:left，导致一切都乱了。 - John Anderson

是的，浮动和display:block可以影响表格的功能。 - sandeep

Answer 2

上边距:自动;

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; 
 }​

实时示例

- Muhammad Usman

---

将您的Fiddle内容放入此处并解释代码的作用。另请参阅http://meta.stackexchange.com/questions/8231 - Robert Harvey

Answer 3

你可以使用 valign="middle" 实现此操作，而不需要任何 CSS。尝试此代码。

<table width="100%" border="1" cellspacing="0" cellpadding="0">
  <tr>
    <th height="550" align="center" valign="middle" scope="col">

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

- Sarin Jacob Sunny

---

HTML5 不支持 valign 属性。 - Brian Leach