CSS 实现一行文字居中对齐,多行文字左对齐
应用场景:
主要用于产品列表页面,用于产品图片下面,显示产品的名称,当产品名称字数较少时,文字将居中对齐,但字数较多时则希望采用左对齐。另一个应用场景,则是消息弹出框的提示信息,当提示内容比较少时,内容居中显示在弹出框,提示内容比较多时,内容居左对齐。
分析:
当文字长度小于盒子宽度,也就是一行时,文字居中。当文字长度大于盒子的宽度,会自动换行,成为多行文字,此时文字左对齐。
方法:利用行内元素(双层盒子)
原理:设定内层盒子为行内元素,当内层盒子内容宽度小于外层盒子的宽度时,其对齐方式为外层盒子对齐方式,当内层盒子内容宽度达到与外层重叠时,内容为内层盒子的对齐方式。
1 | <li class="parent"><p class="child">一行文字</p></li> |
1 | .parent{ |