需求:产品列表页面中,产品图片下面显示产品的名称,产品简介时需要自适应文字长度。一行时居中显示,多行左对齐显示。
一、利用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}