一、垂直居中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;}