Question

为什么下面的代码不会导致<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>
                    &nbsp;
                </td>
                <td>
                    &nbsp;
                </td>
                <td>
                    &nbsp;
                </td>
            </tr>            <tr>
                <td>
                    &nbsp;
                </td>
                <td>
                    &nbsp;
                </td>
                <td>
                    &nbsp;
                </td>
            </tr>
            <tr>
                <td>
                    &nbsp;
                </td>
                <td>
                    &nbsp;
                </td>
                <td>
                    &nbsp;
                </td>
            </tr>
        </table>
    </div>

我希望<table>位于<div>的中间，但它位于顶部！我该如何解决这个问题？

感谢您将来的建议。

Answer 1

在表格单元格之外，vertical-align设置一行内文本的垂直对齐方式，而不是像表格那样整个元素的垂直对齐方式。

但是，如果您在display: table-cell;上设置了<div>，那么这似乎可以达到您想要的效果。

我不确定有多少浏览器支持此功能。我已经检查过Chrome 6，Firefox 2和Opera 10.5，它们很好用。 Internet Explorer可能是另一回事。

Answer 2

你试过“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>

Answer 3

试试这个：

<body style="vertical-align:middle">
<table style="display:inline-block">
<!-- your stuff -->
</table>
</body>

table是一个块元素。为了使其垂直对齐，我认为它需要显示为inline。在这样的情况下，inline-block通常会给你两全其美。干杯！

Answer 4

很容易。始终使用此＆gt;＆gt; style =“vertical-align：middle”＆lt;＆lt;在每个TD内部。您可以使用顶部，中部和底部。你也可以在CSS中推送它。

Answer 5

试试这个：

#centerAligned{
    text-align: center;
    margin-top: 50%;
}

它对我有用!!

如何在固定高度<div>？</div> <table> </table>的中间垂直对齐a

5 个答案: