代码
实现文字不超过一行居中对齐,内容超过一行左对齐1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19.box {
text-align: center;
}
.text {
display: inline-block;
text-align: left;
}
.box {
text-align: center;
}
.text {
display: inline-block;
text-align: left;
}
<div class="box">
<p class="text">内容</p>
</div>
原理
父元素 .box 居中会使 inline-block 子元素的 居中对齐
子元素 .text 容器居中对齐,容器内的文字始终是左对齐,容器宽度根据文字多少自适应,当内容多余一行,宽度达到100%会呈现左对齐