应用场景：

主要用于产品列表页面，用于产品图片下面，显示产品的名称,当产品名称字数较少时，文字将居中对齐，但字数较多时则希望采用左对齐。另一个应用场景，则是消息弹出框的提示信息，当提示内容比较少时，内容居中显示在弹出框，提示内容比较多时，内容居左对齐。

分析:

当文字长度小于盒子宽度，也就是一行时，文字居中。当文字长度大于盒子的宽度，会自动换行，成为多行文字，此时文字左对齐。

方法：利用行内元素(双层盒子)

原理：设定内层盒子为行内元素，当内层盒子内容宽度小于外层盒子的宽度时，其对齐方式为外层盒子对齐方式，当内层盒子内容宽度达到与外层重叠时，内容为内层盒子的对齐方式。

1
2
<li class="parent"><p class="child">一行文字</p></li>
<li class="parent"><p class="child">这里是比较长的两行文字</p></li>
1
2
3
4
5
6
7
8
.parent{
	text-align:center;
}

.child{
	display:inline-block;
	text-align:left;
}