居中带有内联列表的元素
我有点不好意思问这个问题，但我正在努力将 UL 元素集中在 DIV 中。 UL 块包含内联 LI。
这是该网站上的导航菜单： http://dev.gratefulhearttherapy.org/
我尝试过文本- UL 元素及其父级 DIV#headerNav 和 DIV.custom 的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 来感知它。
非常感谢您找出答案或引导我找到解决方案！
奥利维尔
I'm a bit embarrassed to ask about this, but I'm struggling with centering a UL element inside a DIV. The UL block contains inline LIs.
This is the NavMenu on this website: http://dev.gratefulhearttherapy.org/
I've tried text-align:center and margin:auto to both the UL element and its parent DIV#headerNav and DIV.custom. None worked.
<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>
It would be complicated to copy the CSS, so here is the direct file: http://dev.gratefulhearttherapy.org/index.php/tools/css/themes/gratefulheart/typography-new2.css though you'd have a better sense of it using Firebug or Chrome Inspector.
Thanks a lot for you figure it out or can lead me to the solution!!
Olivier
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（2）
在
.custom ul.mega-menu li上，将float: left更改为display: inline-block。然后，由于父
ul上的text-align: center，li将居中。您还需要将
display: block添加到.custom ul.mega-menu li .sub li。On
.custom ul.mega-menu li, changefloat: lefttodisplay: inline-block.The
lis will then be centered, thanks totext-align: centerwhich you have on the parentul.You'll also need to add
display: blockto.custom ul.mega-menu li .sub li.如果您想让块元素居中，请尝试以下操作：
980px可以更改为任何值。另外，不要忘记清除浮动（在 Google 上查找“clearfix”）。
If you want to center a block element, try this:
980pxcan be changed to any value.Also, don't forget to clear the float (look for "clearfix" on Google).