方案一、利用浮動(dòng)的包裹性和相對定位百分比數(shù)據(jù)值特性,傳說稱之為“相對浮動(dòng)”

.unknow_width_center1?{position:relative;?left:50%;?float:left;}
.unknow_width_center1 li?{position:relative;?right:50%;?z-index:2;?float:left}
<ul?class="unknow_width_center1">
????<li><a href="#">1</a></li>
????<li><a href="#">2</a></li>
????<li><a href="#">3</a></li>
????<li><a href="#">4</a></li>
????<li><a href="#">5</a></li>
????<li><a href="#">6</a></li>
</ul>

通過給父元素設(shè)置浮動(dòng)float,再設(shè)置父元素的position屬性為relative和left:50%;子元素設(shè)置position:relative和left:-50%來實(shí)現(xiàn)水平居中。

可以保留塊級元素仍然是以display:block的形式顯示,不會(huì)添加無意義的標(biāo)簽,不添加嵌套深度。缺點(diǎn)是設(shè)置了position:relative;帶來了一些副作用，并且需要閉合（清除）浮動(dòng)。

方案二、利用text-align屬性特性（text-align:center 對于ie6、7塊級和內(nèi)聯(lián)級都可以水平居中。其它瀏覽器內(nèi)聯(lián)級(內(nèi)聯(lián)塊級，文字)元素才可以水平居中，塊級無效。 ）強(qiáng)制定義為內(nèi)聯(lián) display:inline

.unknow_width_center2?{text-align:center;?padding:5px;}?.unknow_width_center2 li?{display:inline;}<ul>?<li><a href="#">1</a></li>?<li><a href="#">2</a></li>?<li><a href="#">3</a></li>?<li><a href="#">4</a></li>?<li><a href="#">5</a></li>?<li><a href="#">7</a></li>?<li><a href="#">8</a></li>?<li><a href="#">9</a></li>?<li><a href="#">10</a></li>?</ul>

將子元素設(shè)置為內(nèi)聯(lián)居中，那么大家都知道的display:inline內(nèi)聯(lián)元素寬高是不可以設(shè)定的，局限性太大，不宜使用。

方案三、利用table的屬性特性

.unknow_width_center3{margin:0?auto}
?.unknow_width_center3 ul?{overflow:hidden;?*zoom:1}?
.unknow_width_center3 ul li?{float:left;}
<table?class="unknow_width_center3">
<tr>?<td><ul>?<li><a href="#">1</a></li>?<li><a href="#">2</a></li>?<li><a href="#">3</a></li><li><a href="#">4</a></li>?<li><a href="#">5</a></li>?<li><a href="#">7</a></li>?<li><a href="#">8</a></li>?<li><a href="#">9</a></li>?<li><a href="#">10</a></li>?</ul></td>?</tr> </table>

是使用table作為容器的方法來實(shí)現(xiàn)。添加了無意義的標(biāo)簽。Table標(biāo)簽本身并不是塊級元素,當(dāng)我們不設(shè)置table的寬度的話,他里面的寬度 是由他內(nèi)部元素的寬度撐起來的。但即使我們沒有設(shè)置table的寬度,直接設(shè)置table的外邊距margin:0 auto;就可以實(shí)現(xiàn)水平居中了!這樣我們就可以通過設(shè)置table水平居中,間接使里面的內(nèi)容居中。

方案四、利用內(nèi)聯(lián)塊display:inline-block的text-align屬性

.unknow_width_center4?{text-align:center}?.unknow_width_center4 ul li?{display:inline-block;*display:inline;?*zoom:1;}?<ul?class="unknow_width_center4 "><li><a href="#">1</a></li><li><a href="#">2</a></li><li><a href="#">3</a></li></ul>

IE6/7下直接設(shè)置display:inline-block的居中無效，這里在IE6/7下設(shè)置了display:inline，神奇的是竟然 可以設(shè)置寬高及其垂直方向的內(nèi)外邊距。缺點(diǎn)是display:inline-block會(huì)引起一些間隙，當(dāng)然有看起來礙眼解決方案。

轉(zhuǎn)載于:https://www.cnblogs.com/pfzeng/p/4469395.html

總結(jié)

以上是生活随笔為你收集整理的位置宽度的ul居中的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。