css自适应的文字长度的div

需求：产品列表页面中，产品图片下面显示产品的名称，产品简介时需要自适应文字长度。一行时居中显示，多行左对齐显示。

 一、利用display:inline-block；属性

 1、html 代码段

<div>
	<p>北京市海淀区</p>
</div>
<div>
	<p>内蒙古自治区锡林郭勒盟</p>
</div>

 2、css 片段
 

div {width: 120px;background: #fafafa;height: 50px;margin-right: 10px;text-align: center;}
p {display:inline-block;text-align:left;}

 css 需要让p居中让P居中，P中的文字左对齐 
 P的宽度根据文字的宽度伸缩 ， 当文字为一行是，则P的宽度小于LI的宽度，又居中， 则，看上去文字是局中的  当大于一行时，P的宽度和LI的宽度是一致的  文字就居左了

1、利用display:inline-block；属性

div {width: 120px;background: #fafafa;height: 50px;margin-right: 10px;}
span {display:table;margin: 0 auto}