设置显示的div元素的中心位置：inline-block

Question

我知道当我们为具有指定宽度的html块元素的左右边距设置自动值时，该元素具有中心位置。 但是如果我想要包装以使自动尺寸取决于内容，我设置display : inline-block，但中心位置现在不起作用...

我该怎么办？ 谢谢你提前。

Answer 1

如果您将display：inline-block设置为元素，则可以使用以下内容包含该元素的包装：

.wrapper {
    text-align: center;
}

演示：http://jsfiddle.net/sGaTZ/

Answer 2

如果您不想使用包装器，可以试试这个：

<div class="box">test</div>

和 CSS ：

.box {
    display: table;
    border: 1px solid blue;
    margin: 0 auto;
}

使用没有特定宽度的display: table将导致框缩小以适应内容。然后，您可以使用margin: 0 auto将其居中。

演示小提琴：http://jsfiddle.net/audetwebdesign/FdnGs/