将 display:inline 用于居中菜单与 display:block答案

【问题标题】：Using display:inline for centered menus vs display:block将 display:inline 用于居中菜单与 display:block
【发布时间】：2012-02-12 09:16:50
【问题描述】：

假设您有一个水平的图形导航菜单，其中每个菜单项的宽度都是可变的（由填充而不是 <li> 元素的宽度控制）。这意味着您无法真正知道 ul 的宽度（为了使其居中），因为文本在不同浏览器中的大小不同。

到目前为止，我要么

A) 只看它并在 ul 上使用 margin-left

B) 使用jquery计算宽度然后设置set为inline-style这样就可以设置宽度，然后就可以margin:auto'd了。

但有人刚刚告诉我，我可以使用 display: inline 并且它可以正常工作，而不使用 float，并且它总是居中？有谁听说过吗？他是新人，无法完全解释，所以我很好奇你们的想法。他说他认为文本对齐：居中。我看不出这在菜单上是如何工作的……这不是文本？

【问题讨论】：

使用 CSS 将某些内容居中的方法与为其编写标记的方法一样多。发布您的代码，我们可以帮助解释发生了什么。
我知道他做了什么...他将 ul 设置为 text-align: center;然后他将 li 元素设置为 display:inline;我假设这会诱使浏览器认为每个列表项都是文本，然后将可变宽度列表项正确居中？

【解决方案1】：

任何文本级别的元素都可以居中。它将根据其父元素居中。应该是块级元素。

以下菜单可以居中，

<ul id="ul">
<li>one</li>
<li>two</li>
<li>January</li>
<li>September</li>
</ul>

使用这个 CSS

ul#ul{text-align:center;}
ul#ul li{display:inline;}

请参阅此jsfiddle 以获得想法

【讨论】：

【解决方案2】：

将ul 和lis 设置为display:inline 或display:inline-block，并将ul 的容器设置为text-align:center。您可能需要添加 zoom:1 才能使某些旧版本的 IE 与 inline-block 正常工作。