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

How do I vertically center a div that is inside a table cell?

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

HTML:

HTML：

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

CSS:

CSS：

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

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

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

I know the class definitions are redundant, but I've been trying lots of different things. Why isn't the solution (whatever it is) intuitive. None of the "obvious" solutions that I tried would work.

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

4 个解决方案

#1

There is no need to defineheight in .divClass . write like this:

无需在.divClass中定义高度。像这样写：

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

Check this http://jsfiddle.net/ncrKH/

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

#2

The best tutorial I have ever found regarding this question: How to vertically center stuff

我在这个问题上找到的最好的教程：如何垂直居中

#3

.divClass { margin-top:auto; }

.divClass {margin-top：auto; }

HTML

HTML

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

CSS

CSS

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

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

.divClass {
margin-top:auto; 
 }

Live Example

实例

#4

With out any css itself you can do this with valign="middle" try this code.

没有任何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>

#1