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 eblems 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?

Answer 1

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

.menu { left: 125px; }

125px or so should be good

Answer 2

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

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"&gt;Register&lt;/a&gt;&lt;/li&gt; 
 </ul>
</div>
</div>