Question

重复问题的描述, 但对于其它问题的答案似乎都无法解决我的问题。我想在页面的中央对一个 < code> div 进行对齐。 < code> 只能与里面的内容一样宽。它将用作一个模式弹出。我在这里设置了一个 jsFiddle: < a href=" http://jsfiddle.net/PDzNj/11" rel=“ no follow" > > http://jsfiddle.net/PDzNj/11

div 在中间对齐其左侧,而不是 div 的中心(这是预期效果)

事先感谢您的帮助

Answer 1

一个选项是用周围的 < code@ lt; div> 来模拟表格。

<div class= outer >
    <div class= inner >
        <div class= thebox >Contents</div>
    </div>
</div>

然后使用 CSS :

div.outer {
    display:table;
    width:100%; //Or however wide you want the container to be
}
div.inner {
    display:table-cell; //This allows the use of vertical-align
    vertical-align:middle;
    text-align:center;
    width:100%;
}
div.thebox { //Your variable-width container
    display:inline-block; //Makes it obey text-aligning.
}

当然,您可以根据需要添加高度值。这比让高度相对,或使用边距,更整洁,更明智,比让高度相对,更聪明,而且破坏周围环境也更少。

友情链接