如果您想让一个容器内部的所有元素都居中显示,可以将该容器外套一个 div
元素,并为这个 div
元素设置样式 text-align: center;
,同时将该容器的 display
属性值设置为 inline-block
或者 inline-flex
。
例如:
HTML 代码:
<div class="center">
<div class="container">
<!-- 这里是子元素 -->
</div>
</div>
CSS 代码:
.center {
text-align: center;
}
.container {
display: inline-block; /* 或者 display: inline-flex; */
}
这样就可以让 .container
容器内部的所有元素在水平方向上居中对齐了。需要注意的是,这种方式只适用于需要水平居中的情况,如果需要垂直居中,则还需要其他样式的配合。