Question

我有点尴尬地问这个问题，但我正在努力将一个UL元素集中在DIV中。 UL块包含内联LI。

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

我已经尝试了text-align：center和margin：auto到UL元素及其父DIV＃headerNav和DIV.custom。没有工作。

<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。

Answer 2

如果你想要一个块元素居中，试试这个：

width:980px;
margin:0 auto;

980px可以更改为任何值。

另外，不要忘记清除浮动（在Google上查找“clearfix”）。

使用内联列表居中<ul>元素</ul>

2 个答案: