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

6g8kf2rb 于 2023-01-27 发布在其他

关注(0)|答案(2)|浏览(124)

我知道当我们为一个指定宽度的html块元素设置左右边距为自动值时，这个元素就有了中心位置，但是如果我想让 Package 器根据内容自动调整大小，我设置了display : inline-block，但是现在中心位置不起作用了。
我该怎么办？

2条答案

如果要设置显示：内联块添加到元素中，则可以使用以下语句对该元素进行 Package ：

.wrapper {
    text-align: center;
}

如果您不想使用 Package 器，可以尝试以下操作：

<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/