css - 使用内联列表将 <ul> 元素居中

Question

我有点不好意思问这个问题，但我正在努力将 UL 元素置于 DIV 中。 UL block 包含内联 LI。

这是本网站上的 NavMenu:http://dev.gratefulhearttherapy.org/

我已经对 UL 元素及其父 DIV#headerNav 和 DIV.custom 尝试了 text-align:center 和 margin:auto。都没有用。

<div id="headerNav">
<div class="custom">
<ul id="mega-menu-77" class="mega-menu" style="display:none;">
<li class="nav-selected nav-path-selected top-level-nav first il-1"><a class="nav-selected nav-path-selected pl-1" href="/" accesskey="H">Home</a></li>
<li class="top-level-nav il-72"><a href="/services/psychotherapy/" class="pl-72" accesskey="S">Services</a><ul class='sub_menu pid-72'><li class=" il-88"><a href="/services/psychotherapy/" class="pl-88" accesskey="P">Psychotherapy</a></li>
<li...> ... </li>
<li...> ... </li>
<li...> ... </li>
</ul>
</div>

复制CSS会很复杂，所以这里是直接文件:http://dev.gratefulhearttherapy.org/index.php/tools/css/themes/gratefulheart/typography-new2.css尽管使用 Firebug 或 Chrome Inspector 可以更好地了解它。

非常感谢您解决问题，或者可以引导我找到解决方案!

奥利维尔

Answer 1

在 .custom ul.mega-menu li 上，将 float: left 更改为 display: inline-block。

li 将居中，这要归功于 text-align: center，您在父级 ul 上设置了它。

您还需要将 display: block 添加到 .custom ul.mega-menu li .sub li。