无序列表中多行列表项的水平居中

时间:2011-02-12 02:07:28

标签: css list centering html-lists

我有一个包含在第二行的无序列表,需要在包含UL的内部水平居中。每个LI是设定的宽度和高度。我已经看到很多方法适用于单行,但是当列表包含到第二行时,我尝试过的任何工作都没有。如果这在IE7 +中有效,那将是理想的 - 感谢您的帮助。

请参阅此处以获取说明:

illustration http://grab.by/8UIl

1 个答案:

答案 0 :(得分:34)

这是我能找到的最佳方法。

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/