2011-02-12 77 views
22

我有一個無序列表,它包含在第二行,並且需要在包含的UL中水平居中。每個LI都是一組寬度和高度。我已經看到許多方法適用於單行,但是我試過的東西在列表換行到第二行時正在工作。如果這在IE7 +中起作用會很理想 - 感謝您的幫助。無序列表中多行列表項的水平居中

看到這裏的一個例證:

illustration http://grab.by/8UIl

回答

32

這是我能找到的最好的方法。

ul li { 
    /* make list elements fall inline as block elements */ 
    position: relative; 
    display: inline-block; 
    /* next two lines only for display purposes */ 
    text-align: center; 
    border:1px solid red; 
} 
/* horizontally center ul element */ 
ul { text-align:center; } 

查看鏈接以一個例子:http://jsfiddle.net/gfkPG/

+0

OMG LOL - 這樣一個簡單的解決方案 - 這樣用不必使用複雜的變通辦法,我忘了看的很明顯。非常感謝! – John 2011-02-12 03:35:08