Html 如何垂直对齐表格单元格内的 div？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/10990457/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How do I vertically align a div inside a table cell?
提问by John Anderson
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.
我知道类定义是多余的，但我一直在尝试很多不同的东西。为什么解决方案（无论它是什么）不直观。我尝试过的“明显”解决方案都不起作用。
采纳答案by sandeep
There is no need to defineheightin .divClass. write like this:
不需要height在.divClass 中定义。像这样写：
.cellClass {
vertical-align:middle;
height:90px;
border:1px solid red;
}
Check this http://jsfiddle.net/ncrKH/
回答by Muhammad Usman
.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;
}?
回答by GEMI
The best tutorial I have ever found regarding this question: How to vertically center stuff
关于这个问题，我找到的最好的教程： 如何垂直居中东西
回答by Sarin J S
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>
