33

如何将表格单元格内的 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;
}

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

4

3 回答 3

26

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

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

检查这个http://jsfiddle.net/ncrKH/

于 2012-06-12T04:30:46.173 回答
0

.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

于 2012-06-12T04:19:35.717 回答
-1

如果没有任何 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>
于 2012-06-12T05:12:41.003 回答