Question

我创建了一个JS小提琴来演示我的问题：http://jsfiddle.net/pqTqH/

如何更新我的CSS以使表格垂直居中而不设置表格的height或top-margin？我希望桌子保持居中，即使只有一排。最终，我只需要它是动态的，所以我可以通过Jquery向我的表添加行，并且表将在<div>中保持居中（垂直和水平）。

注意：总会至少有一行，但不超过15行，因此该表应始终适合<div>。

Answer 1

使用table-cell进行简单修复，您在小提琴中暗示了这一点：

#right {
    height: 450px;
    width: 50%;
    background-color: #CCCCFF;
    font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
    font-size: 12px;
    line-height: 14px;
    color: #333;
    display: table-cell;
    vertical-align: middle;
}

在原始示例中，您声明了float: left，结果div#right的行为与table-cell不同，因为其display值计算为block }，所以你失去了垂直对齐控制。

参考：要详细了解display的计算机价值，请参阅：
http://www.w3.org/TR/CSS2/visuren.html#dis-pos-flo

Answer 2

将表放在另一个表中，如下面的代码示例所示：

<div id="right">
    <table style="vertical-align: middle; height: 100%; width: 100%;">
        <tr>
            <td>
               // your table
            </td>
        </tr>
    </table>
</div>

Answer 3

我通常通过jQuery中的onload / window.resize事件来执行此操作，因为我不必更改我的DOM布局方式或使用CSS进行操作。

JSFiddle

$(function() {
    centerTable();
    $(window).resize(centerTable);
});

function centerTable()
{
    var right = $('#right');
    var table = $('#right table');
    $('#right table').css('margin-top', ((right.height() - table.height()) / 2) + 'px');
}

我用jquery onload事件更新了你的jsFiddle示例。如果您不关心窗口大小调整，则可以在onload事件中运行一次代码。通过不使用2个变速器，这也可以缩短为1个衬里。

根据行数动态地在<div>中垂直居中？</div> <table> </table>

3 个答案: