如何垂直对齐< table>在固定高度的中间< div&gt ;? [英] How can I vertically align a <table> in the middle of a fixed height <div>?

问题描述

为什么下面的代码不会使< table> 在< div> code>？

Why does the code below not cause the <table> to be vertically-aligned in the middle of the <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> ，但它在顶部！

I want the <table> in the middle of the <div>, but it is at the top! How can I fix this?

推荐答案

感谢您未来的建议。 p>在表格单元格之外， vertical-align 设置一行内文本的垂直对齐，而不是像表格一样的整个元素的垂直对齐。

Outside of table cells, vertical-align sets the vertical alignment of text within a line, rather than the vertical alignment of entire elements like your table.

但是，如果您在< div> 上设置 display：table-cell; $ c>，这似乎实现你想要的效果。

However, if you set display: table-cell; on your <div>, that seems to achieve the effect you want.

我不知道有多少浏览器支持这个。我在Chrome 6，Firefox 2和Opera 10.5签到，他们很好。 Internet Explorer可能是另一回事。

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.

这篇关于如何垂直对齐< table>在固定高度的中间< div&gt ;?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！