文字少于一行时居中，超过一行时靠左

最新推荐文章于 2024-02-29 21:49:30 发布

原创最新推荐文章于 2024-02-29 21:49:30 发布 · 890 阅读

1 ·

CC 4.0 BY-SA版权

css 专栏收录该内容

3 篇文章

订阅专栏

本文介绍了一种CSS技巧，通过设置内联块级元素和文本对齐方式，实现文本在一行内居中，多行时左对齐的效果。关键在于使用display:inline-block和text-align属性。

文字少于一行时居中，超过一行时靠左

##css部分
.box{
text-align: center;
}
.text{
display: inline-block;
text-align: left;
}
##html部分

文字长度

原理：
给 p 标签设置 inline-block 后，该标签变成内联块级元素。根据内联元素的特性，宽度为 auto 默认值时，真实宽度为文本的宽度，此时 text-align: left 是起了作用的，它在 p 标签中靠左显示，而整个 p 标签因为父级 div 的 text-align: center 设置又居中，所以出现一行时居中，超出一行时靠左的表象。