Question

我有5个html页面，代码相同。说这是代码：

<div id='generic'>
</div>

所有5个页面都链接到同一个外部CSS文件，就是这样：

<style>
    #generic {
        width: 700px;
        height: 500px;
    }
</style>

在5页的每一页上，我插入了一张表，如此

<div id='bottomBar'>
    <table id='bottomTable'>
        <tr id='bottomTr'>
        </tr>
    </table>
</div>

该表只有一行。在一行中，我需要从1-10中选择一个随机数，这就是行所具有的td数。所以第一个html页面可以有2个td，第二个可以有6个，等等。我需要这样做，以便表格的垂直位置在所有页面中是相同的，但表格必须水平对齐。我必须使用绝对位置，因为其他用户可能会在某些页面上的表格之前键入几个段落，而在某些页面上，可能没有任何其他段落，所以为了使我具有相同的表格垂直位置，我需要绝对的位置。如何使每个表水平居中？通过水平对齐，我的意思是每张桌子左边和右边都有均匀的空白区域，无论桌子有多少td。

margin: 0 auto;

对我不起作用。请注意，我没有使用CSS3并且正在使用IE8。

Answer 1

margin: 0 auto不适用于绝对定位元素。你需要做的是在中间绝对位置。你通过向左移动50％来实现这一目标;然后将左边距调整为元素宽度的负半部分

#bottomTable {
 position: absolute;
 width: 700px;
 left: 50%;
 margin-left: -350px; /*Half the width of your element*/
}

这会将其置于其父级中间

PS。确保父容器位置设置为相对

http://jsfiddle.net/s7Gmm/3/

CSS - 如何水平居中表位置是绝对的

1 个答案: