使不定寬塊狀元素水平居中－第三種方法方法三：通過給父元素設(shè)置?float，然后給父元素設(shè)置?position:relative?和?left:50%，子元素設(shè)置?position:relative?和?left:?-50%?來實(shí)現(xiàn)水平居中。我們可以這樣理解：假想ul層的父層（即下面例子中的div層）中間有條平分線將ul層的父層（div層）平均分為兩份，ul層的css代碼是將ul層的最左端與ul層的父層（div層）的平分線對(duì)齊；而li層的css代碼則是將li層的平分線與ul層的最左端（也是div層的平分線）對(duì)齊，從而實(shí)現(xiàn)li層的居中。?代碼如下：</head>????<style>?????????.container ? { ?????????????????float:left; ? ??????????????????position:relative; ? ??????????????????left:50%?????????}?????????.container ul ?{ ? ??????????????????list-style:none; ? ??????????????????margin:0; ? ??????????????????padding:0; ? ? ? ? ?????????????????position:relative; ? ??????????????????left:-50%;?????????}?????????.container li????{????????????????float:left;????????????????display:inline;????????????????margin-right:8px;????????????????}?????</style></head><body>?????<div> ? ??????????<ul> ? ? ? ??????????????<li><a href="#">1</a></li> ? ? ? ??????????????<li><a href="#">2</a></li> ? ? ? ??????????????<li><a href="#">3</a></li> ? ??????????</ul>?????</div>?</body>我們可以這樣理解：假想ul層的父層（即下面例子中的div層）中間有條平分線將ul層的父層（div層）平均分為兩份，ul層的css代碼是將ul層的最左端與ul層的父層（div層）的平分線對(duì)齊；而li層的css代碼則是將li層的平分線與ul層的最左端（也是div層的平分線）對(duì)齊，從而實(shí)現(xiàn)li層的居中。完全懵了。有誰能幫幫我？？尤其是讀了這段話之后，我的腦袋都轉(zhuǎn)不動(dòng)了。。
4 回答
隨風(fēng)逐流
TA貢獻(xiàn)5條經(jīng)驗(yàn) 獲得超4個(gè)贊
ul移到了中間 ul的最左端和父容器中線對(duì)齊 這時(shí)由于ul有寬度，所以整體是偏右的，偏了一半的ul的寬度li往左回移一半的寬度，平分線到了正中間的位置，也就是 “ul的最左端”
以后又不懂得，可以先關(guān)注我。和我私聊也是可以的！盡量幫你解決問題。
人笨嫌刀鈍
TA貢獻(xiàn)100條經(jīng)驗(yàn) 獲得超24個(gè)贊
ul移到了中間 ul的最左端和父容器中線對(duì)齊 這時(shí)由于ul有寬度，所以整體是偏右的，偏了一半的ul的寬度
li往左回移一半的寬度，平分線到了正中間的位置，也就是 “ul的最左端”
添加回答
舉報(bào)
0/150
提交
取消