Can you help me center a <ul> 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?
Answer
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]-->