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

Posted 2023-03-05

【中文标题】无序列表中多行列表项的水平居中

【英文标题】：Horizontal Centering of Multi-Line List Items in Unordered List

【发布时间】：2011-06-25 22:35:09

【问题描述】：

我有一个换行到第二行的无序列表，需要在包含的 UL 中水平居中。每个 LI 都是一个设置的宽度和高度。我见过许多适用于单行的方法，但是当列表换行到第二行时，我尝试过的任何方法都不起作用。如果这在 IE7+ 中有效，那将是理想的——感谢您的帮助。

请看这里的插图：

http://grab.by/8UIl

【参考方案1】：

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

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/

【讨论】：

OMG LOL -- 如此简单的解决方案 -- 习惯于使用复杂的解决方法，我忘了看显而易见的。非常感谢！

很抱歉，因为某些原因，这在 IE7 中不起作用。

对于 IE 总是有一个 hack :) 这是我发现的：zoom:1;*display:inline;在有条件的 CSS 中成功了。再次感谢。