Css – Can you help me center a
    element with CSS


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?

Best Solution

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 }