CSS: How can I center a horizontal list? Display:I

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.

Answer 1

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.