本文介绍了一种使用CSS实现单行文本居中显示而多行文本左对齐的技巧。通过在HTML结构中嵌套<h2>和<p>标签，并结合使用display:inline-block和text-align属性，可以轻松达到效果。
居中需要用到 text-align:center，居左是默认值也就是text-align:left。如合让两者结合起来达到单行居中，多行居左呢？这就需要多一个标签，假设一开始我们定义如下：
|
1
|
<h2>单行居中，多行居左</h2> |
现在，我们在 h2 中间，嵌套多一层标签 p：
|
1
|
<h2><p>单行居中，多行居左</p></h2> |
我们让内层 p 居左 text-align:left，外层 h2 居中 text-align:center，并且将 p 设置为display:inline-block ，利用 inline-block 元素可以被父级 text-align:center 居中的特性，这样就可以实现单行居中，多行居左，CSS
如下：
|
1
2
3
4
5
6
7
|
p
{ display:
inline-block; text-align: left;}h2{ text-align: center;} |
扫一扫
1077
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
