我怎样才能垂直对齐<table>在固定高度的中间<div> ?
[英]How can I vertically align a <table> in the middle of a fixed height <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>
我想要<div>中间的<table> ，但它在顶部！ 我该如何解决这个问题？
感谢您未来的建议。
5 个解决方案
解决方案1
8 已采纳 2010-10-31 19:30:34
在表格单元格之外， vertical-align设置一行内文本的垂直对齐方式，而不是整个元素（如表格）的垂直对齐方式。
但是，如果您设置display: table-cell; 在您的<div> ，这似乎达到了您想要的效果。
我不确定有多少浏览器支持这个。 我已经检查了 Chrome 6、Firefox 2 和 Opera 10.5，它们都很好。 Internet Explorer 可能是另一回事。
解决方案2
1 2021-02-23 20:07:19
你试过“display:flex;”吗？
div{ width: 850px; height: 470px; display: flex; /* WIDTH and HEIGHT are required */ justify-content: center; align-items: center; } td, table{ border-collapse: collapse; border: 1px solid black; }
<div> <table> <tr> <td>Lorem</td> <td>Lorem</td> <td>Lorem</td> </tr> <tr> <td>2019</td> <td>2018</td> <td>2017</td> </tr> </table> </div>
解决方案3
0 2010-11-01 16:38:51
试试这个：
<body style="vertical-align:middle">
<table style="display:inline-block">
<!-- your stuff -->
</table>
</body>
table是块元素。 为了让它垂直对齐，我认为它需要显示为inline 。 在这样的情况下， inline-block通常会给你两全其美的。 干杯！
解决方案4
-3 2015-01-03 13:49:48
它很容易。 始终在每个 TD 中使用这个 >> style="vertical-align:middle" << 。 您可以使用顶部、中间和底部。 您也可以将其推送到 CSS 中。
解决方案5
-4 2016-10-17 10:30:45
试试这个：
#centerAligned{
text-align: center;
margin-top: 50%;
}
它对我有用！！
如何在不给出屏幕高度的情况下垂直对齐 div？
[英]How can I vertically align a div without giving the height of the screen?
我可以使用CSS在视口中垂直居中放置固定高度的DIV吗？
[英]Can I center a fixed-height DIV vertically in the viewport with CSS?
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.