Html 如何在固定高度 <div> 的中间垂直对齐 <table>？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/4064677/
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 can I vertically align a <table> in the middle of a fixed height <div>?
提问by LostLord
Why does the code below not cause the <table>to be vertically-aligned in the middle of the <div>?
为什么下面的代码不会导致<table>在中间垂直对齐<div>？
<div style="width: 850px; height: 470px;vertical-align: middle;" align="center">
<table style="padding-left: 20px; width: 700px; border: 10px groove #0033CC; background-color: #F9F9F9;">
<tr>
<td>
</td>
<td>
</td>
<td>
</td>
</tr> <tr>
<td>
</td>
<td>
</td>
<td>
</td>
</tr>
<tr>
<td>
</td>
<td>
</td>
<td>
</td>
</tr>
</table>
</div>
I want the <table>in the middle of the <div>, but it is at the top! How can I fix this?
我想要 的<table>中间<div>，但它在顶部！我怎样才能解决这个问题？
Thanks for your future advice.
感谢您未来的建议。
采纳答案by Paul D. Waite
Outside of table cells, vertical-alignsets the vertical alignment of text within a line, rather than the vertical alignment of entire elements like your table.
在表格单元格之外，vertical-align设置一行内文本的垂直对齐方式，而不是整个元素（如表格）的垂直对齐方式。
However, if you set display: table-cell;on your <div>, that seems to achieve the effect you want.
但是，如果您display: table-cell;在 上进行设置，则<div>似乎可以达到您想要的效果。
I'm not sure how many browsers support this though. I've checked in Chrome 6, Firefox 2 and Opera 10.5, and they're fine with it. Internet Explorer could be a different matter.
我不确定有多少浏览器支持这个。我已经检查了 Chrome 6、Firefox 2 和 Opera 10.5，它们都很好。Internet Explorer 可能是另一回事。
回答by Jim Fell
Try this:
尝试这个：
<body style="vertical-align:middle">
<table style="display:inline-block">
<!-- your stuff -->
</table>
</body>
tableis a block element. To get it to vertically align, I think it needs to be displayed as inline. inline-blockwill often give you the best of both worlds in situations like these. Cheers!
table是块元素。为了让它垂直对齐，我认为它需要显示为inline. inline-block在这种情况下，通常会为您提供两全其美的服务。干杯!
回答by KaiLynn Darkpixie
Its easy. Always use this >> style="vertical-align:middle" << inside every TD. You can use top, middle and bottom. You can push it in the CSS too.
这很简单。始终在每个 TD 中使用这个 >> style="vertical-align:middle" << 。您可以使用顶部、中间和底部。您也可以将其推送到 CSS 中。
回答by Deepak Badiger
try this:
尝试这个：
#centerAligned{
text-align: center;
margin-top: 50%;
}
it worked for me!!
它对我有用！！
