css文字居中 原
1、垂直居中
像上头左边的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;}2、不确定内容的水平居中
上图假如里面的内容不确定长度，就无法用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;}(adsbygoogle = window.adsbygoogle || []).push({});
本文参与 腾讯云自媒体分享计划，分享自作者个人站点/博客。
原始发表：2016/11/18 ，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读