如何垂直对齐表格单元格内一个div？(How do I vertically align a div

如何垂直居中一个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;
}

我知道类的定义是多余的，但我一直在尝试很多不同的东西。 为什么不是解决方案（不管它是什么）直观。 没有，我试图将工作的“明显”的解决方案。

Answer 1:

没有必要定义height在.divClass。 像这样写：

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

勾选此http://jsfiddle.net/ncrKH/

Answer 2:

我曾经发现关于这个问题的最好的教程： 如何垂直居中的东西

Answer 3:

与任何CSS本身就可以做到这一点与valign="middle"试试这个代码。

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

Answer 4:

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

活生生的例子

文章来源: How do I vertically align a div inside a table cell?