在制作中內(nèi)容居中通常方法是給容器width固定寬度,然后text-align:center;margin:0 auto;或者將塊裝換成內(nèi)聯(lián)元素display:inline,然后text-align:center就能實現(xiàn)居中效果了。
下面這個方法是通過定位來實現(xiàn)的效果:
CSS代碼:
<style>
*{ padding:0; margin:0; list-style:none;}
.sjbest ul { float:left; position:relative; left:50%;}
.sjbest ul li { float:left;position:relative; right:50%; padding:6px; }
</style>
HTML代碼:
<div class=”sjbest”>
<ul>
<li><a href=”#”>分類一</a></li>
<li><a href=”#”>分類二</a></li>
<li><a href=”#”>分類三-設(shè)計邦</a></li>
</ul>
</div>
首先,ul設(shè)置左浮動是為了 使得ul的寬度不是100%,而是 幾個li寬度的總和。 之后ul相對定位 使用left把ul移動到劇中位置。
這個使用 li的起始位置在居中的50%的地方,所以需要把li 向左邊移動50%。 這里想問題的時候要注意,position:relative所定義的移動百分比不是相對于自身的,而是相對于父元素的。也就是說 li 50% 實際上計算出來的寬度 是 ul寬度的一半,而不是li的。
新聞熱點
疑難解答