Question

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

Answer 1

On .custom ul.mega-menu li, change float: left to display: inline-block.

The lis will then be centered, thanks to text-align: center which you have on the parent ul.

You’ll also need to add display: block to .custom ul.mega-menu li .sub li.