Question

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

到目前为止，我要么

A）只要注意它并在ul

上使用margin-left

B）使用jquery计算宽度，然后将其设置为内联样式，以便可以设置宽度，然后它可以是margin：auto'd。

但有人告诉我，我可以使用display：inline并且它工作正常，不使用float，它总是居中？有谁听说过吗？他有点新意，无法解释，所以我很好奇你们的想法。他说他认为文本对齐：中心。我不知道这怎么会在一个菜单上工作..虽然不是文本？

Answer 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以获取想法

Answer 2

将ul和li设置为display:inline或display:inline-block，并将ul的容器设置为text-align:center。您可能必须为某些旧版本的IE添加zoom:1才能与inline-block一起正常使用。

建议阅读：