css文字居中

一、垂直居中css

像上頭左邊的LNG垂直居中html

<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 無效的問題,spa

.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%code

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;}

二、不肯定內容的水平居中orm

上圖假如裏面的內容不肯定長度,就沒法用margin:0 auto,來實現水平居中,須要用下面來實現htm

<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;}
相關文章
相關標籤/搜索