首页 > 代码库 > 单行居中，多行居左。
单行居中，多行居左。
单纯的CSS还能控制多行与单行？是不是很有意思，下面直接来干货！
左边单行 右边多行
CSS：
1 *{ 2 margin:0; 3 padding:0; 4 } 5 div{ 6 width:300px; 7 height:300px; 8 color:#fff; 9 background-color: red;10 text-align: center;11 margin:0 auto;12 }13 p{14 display: inline-block;15 text-align: justify;/*这里也可以用text-align:left*/16 17 }
dom方面：
<div> <p>阿萨德</p> </div>
这个实现的原理是让内层 p 居左 text-align: justify（text-align:left），外层 div 居中 text-align:center，并且将 p 设置为display:inline-block ，利用 inline-block 元素可以被父级 text-align:center 居中的特性，这样就可以实现单行居中，多行居左。
单行居中，多行居左。
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。