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

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可能是另一回事.