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

在某些特定的場合，在沒有知道寬度的狀況下卻要求水平居中，前段時間在寫分頁的時候碰到了這個問題。當時在網上找了一些解決方法，並選了一個最合適的方法，現將當時整理的一些方法發出。下列以分頁做爲演示說明：

點擊查看演示DEMO

方案一

利用浮動的包裹性和相對定位百分比數據值特性,傳說稱之爲「相對浮動」

.unknow_width_center1 {position:relative; left:50%; float:left;}
.unknow_width_center1 li {position:relative;  right:50%; z-index:2; float:left}</pre>
<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="#">7</a></li>
  <li><a href="#">8</a></li>
  <li><a href="#">9</a></li>
  <li><a href="#">10</a></li>
</ul>

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

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

方案二

利用text-align屬性特性（text-align:center 對於ie六、7塊級和內聯級均可以水平居中。其它瀏覽器內聯級(內聯塊級，文字)元素才能夠水平居中，塊級無效。 ）強制定義爲內聯 display:inline

.unknow_width_center2 {text-align:center; padding:5px;}
.unknow_width_center2 li {display:inline;}</pre>
<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;}</pre>
<table class="unknow_width_center3">
<tbody>
<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>
</tbody>
</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;}</pre>
<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會引發一些間隙，固然有看起來礙眼解決方案。

方案五

利用table table-cell

.unknow_width_center5 ul{  display:table; margin:0 auto; }
.unknow_width_center5 li{display:table-cell;}</pre>
<ul class="unknow_width_center5 ">
  <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>

ie6/ie7不支持table-cell屬性，因此該方法也不適用ie6/ie7,若是須要兼容在這基礎上加東西也很蛋疼。

點擊查看演示DEMO
我的偏向使用方法一」相對浮動」，適用普遍代碼簡潔且不會出現什麼問題，惋惜就是每次使用的時候要考慮浮動的處理。

轉自：cocss » 未知寬度水平居中的幾種方法