Can you help me center a <ul> element with CSS?

Question

I've been puzzling over something which ought to be very easy indeed, but after a fruitless three hours I've not yet solved it:

A friend asked me to fix the template of his WordPress website so that the horizontal navigation menu-bar is centered horizontally on the page. He wants it to fit snugly across the bottom-middle of the red-section - then it would just fit between the two emblems on either side of the red page.

The red section (class="header") has text-align set to center. This seems to be good enough to ensure that the title and the description text underneath it are center aligned but for some reason I cannot make the menu (which is a ul) align to the center of the page.

Would anybody care to suggest what I'm doing wrong? Why is it that I cannot get the menu centered? What is it that I need to change in the style-sheet to get it working?

Dariadarian

Andrew posted a working answer with 66 up-votes, maybe, just maybe you should consider accepting his answer? – Scrivens

Answer 1

To center a row of blocks, you should use inline-block:

ul.menu { display: block; text-align:center; }
ul.menu li { display: inline-block; }

IE doesn't understand inline-block, but if you set it inline just for IE, it'll still behave as an inline-block:

<!--[if lt IE 8]>
ul.menu li { display: inline }
<![endif]-->

Delly

+1. But note that it is only IE before IE8 that doesn't understand inline-block - but IE8 and on appear to do so. – Unesco

You should also add ul.menu li {float:none;} – Auditory

No need to set display: block; for the ul.menu element as this is already block by default. – Loraleeloralie

Answer 2

1 Write style="text-align: center;" to parent div of ul

2 Write style="display: inline-table;" to ul

2 Write style=" display: inline;" to li

<div class="menu">
  <ul>
    <li>menu 1</li>
    <li>menu 2</li>
    <li>menu 3</li>
  </ul>
</div>

<style>
.menu { text-align:center; }
.menu ul { display:inline-table;}
.menu ul li {display:inline;}
</style>

Finish

Microcyte

Answer 3

Best way to do it is this:

Wrap the ul in a new div id="topmenu" or something like that, then give this the following styles

bottom:0;
position:absolute;
width:780px;

and give the ul.menu this

margin:0 auto;
width:535px;

The only gotcha here is that you're setting the width of the menu list, so if the width of the menu items change it will need to be changed in the CSS file too (ie if a new menu item is added.

UPDATE: Just noticed your comment above about not setting the width manually. If you're willing to use a wee bit of javascript, you could stick this inside the document ready block and remove the width: 535px;

var sum = 0; jQuery('.menu').children().each(function() { sum += jQuery(this).outerWidth(); }); jQuery('.menu').css('width', sum + 30);

This will set the css width property to the actual rendered width once the page loads, so the layout will work.

Complete HTML below:

<div id="header">
    <h1 class="blog-title"><a href="http://www.hootingyard.org/" accesskey="1">Hooting Yard</a></h1>
    <p class="description">A Website by Frank Key</p>
    <div id="topmenu">
        <ul class="menu">
        <li class="current_page_item"><a href="http://www.hootingyard.org/" title="Prose, etc">Prose, etc</a></li>      
        <li class="page_item page-item-533"><a href="http://www.hootingyard.org/archivepage" title="Archives">Archives</a></li>
<li class="page_item page-item-534"><a href="http://www.hootingyard.org/books" title="Books">Books</a></li>
<li class="page_item page-item-551"><a href="http://www.hootingyard.org/regarding-mr-key" title="Regarding Mr Key">Regarding Mr Key</a></li>
<li class="page_item page-item-1186"><a href="http://www.hootingyard.org/subscriptions" title="Subscriptions">Subscriptions</a></li>
        <li class="admintab"><a href="http://www.hootingyard.org/wp-login.php?action=register">Register</a></li>    
    </ul>
</div>
</div>

Aleta

Answer 4

specified width for ul ul{ width:700px; margin:0 auto;}

Alton

Answer 5

Since it's positioned absolute, you can give it a left attribute:

.menu { left: 125px; }

125px or so should be good

Bagpipe

But what if my friend adds more menu items? Surely there is a way to auto-center it? – Dariadarian

Yes, there is. However, element layout needs to change a little to support dynamic alignment. Short-term remedy: keep changing left property. Better, long term one is to change position to relative and fix everything else. – Bagpipe