CSS: How can I center a horizontal list? Display:Inline not working

I am having major trouble getting the simplest of codes to work. I want my css horizontal list to be centered, that's all.

Link here: http://bit.ly/LtIBai

I have this code:

#megaMenu.megaMenuHorizontal ul.megaMenu {
text-align: center;
 }

#megaMenu.megaMenuHorizontal ul.megaMenu > li {
display: inline;
}

Yet it will not center?

NOTE: The window must be at "tablet portrait" size to see the code I'm referring to. Approximately 800px wide, when the logo is centered and the menu falls to the next line, but before the mobile menu appears.

Answers


The reason they refuse to center is because they are also floated to the left. Change dislay: inline to display: inline-block; float: none and they appear centered.

Edit: There's a lot of (mostly unnecessary) CSS code in there so you'll probably need to tweak a few other things before it looks right, but the floating is what's causing the non-centering at least.


Need Your Help

Symfony2 and Twitter Bootstrap

html css symfony twitter-bootstrap twig

I just came across Twitter Bootstrap today, on SO. I have skimmed through some online tutorials and if my understanding so far is correct, using the TB essentially consists of:

Setting foreground color for HSSFCellStyle is always coming out black

java apache-poi poi-hssf

I am using POI to create an Excel spreadsheet in Java. I have the following code used for creating a header row: