css文字居中

一、垂直居中

像上头左边的LNG垂直居中

<dl class="index1-leftTopdl index1-namedl gongqikucun">
			 	<dt><div>LNG</div></dt>
				<dd>供气量 300 Sm³</dd>
				<dd>库存量 600 Sm³</dd>
</dl>

 注意上面的dt里面包含div,不然下面的样式vertical-align:middle;无效，由于dt是浮动的，在里面包含一个div就能够解决vertical-align:middle 无效的问题，

.index1-namedl dt div{width:90px;height:90px;line-height:1.5;font-size:1rem;padding:5px;display:table-cell;vertical-align:middle;}
//右边分割线
.index1-leftTopdl dd{color:#fff;padding-top:6px;padding-left:100px;font-size:1rem;}
.gongqikucun dd{height:45px;line-height:45px;border-bottom:1px solid #dafcfc;}

若是宽度设置为100%，上面则无效，须要设置外层的dt display:table,并设置宽度100%

dl.informationSpecialHead  dt{display:table;height:50px;width:100%;color:#fff;background:#078db1;text-align:center;}
dl.informationSpecialHead dt div{padding:5px;display:table-cell;vertical-align:middle;text-align:center;}

二、不肯定内容的水平居中

上图假如里面的内容不肯定长度，就没法用margin:0 auto,来实现水平居中，须要用下面来实现

<ul class="list-unstyled legendul">
			 	<li><span class="legend1"></span>高压：40</li>
				<li><span class="legend2"></span>中压：30</li>
				<li><span class="legend3"></span>低压：30</li>
 </ul>

.legendul{text-align:center;}
.legendul li{margin-right:20px;display:inline;}