未知寬度水平居中的幾種方法

在某些特定的場合，在沒有知道寬度的情況下卻要求水平居中，今找到些解決方法，現轉過來一起學習學習

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

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

通過給父元素設置浮動float,再設置父元素的position屬性為relative和left:50%;子元素設置position:relative和left:-50%來實現水平居中。

可以保留塊級元素仍然是以display:block的形式顯示,不會添加無意義的標簽,不添加嵌套深度。缺點是設置了position:relative;帶來了一些副作用，並且需要閉合（清除）浮動。

方案二、利用text-align屬性特性（text-align:center 對於ie6、7塊級和內聯級都可以水平居中。其它瀏覽器內聯級(內聯塊級，文字)元素才可以水平居中，塊級無效。 ）強制定義為內聯 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>

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

方案三、利用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作為容器的方法來實現。添加了無意義的標簽。Table標簽本身並不是塊級元素,當我們不設置table的寬度的話,他里面的寬度 是由他內部元素的寬度撐起來的。但即使我們沒有設置table的寬度,直接設置table的外邊距margin:0 auto;就可以實現水平居中了!這樣我們就可以通過設置table水平居中,間接使里面的內容居中。

方案四、利用內聯塊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下直接設置display:inline-block的居中無效，這里在IE6/7下設置了display:inline，神奇的是竟然 可以設置寬高及其垂直方向的內外邊距。缺點是display:inline-block會引起一些間隙，當然有看起來礙眼解決方案。