html - 为具有 display:inline-block 的 div 元素设置中心位置

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/