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

Question

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.

Solution

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.

Comments

[Cthulhu]

Dude, you should really think about your selectors, that doesn't look very good. For example, why would you call #megaMenu.megaMenuHorizontal when you have an ID? Also, don't use ul.megaMenu because the browser will first look for all ul and then from those pick .megaMenu. Are you sure you can't just use something like #megaMenu ul and #megaMenu li? Cheers.

[Rob Vanders]

Thank you!! It works perfectly. Yea, the mega menus plugin gives all kinds of nonsense css. But for now this will do!