Navigation centered in IE but not in Chrome

Question

I have been trying to get the navigation on this page centered for some time now and can not figure it out. It appears to be centered in IE but in Firefox and Chrome it appears more to the left. I have tried to apply a margin: 0 auto; to the #navigation but it ignores it. Also I have tried to apply text-align: center; with no luck. Does anyone have any suggestions so it is cross browser compatible?

UPDATE: I removed the link to the affected website

Answer 1

Try adding

text-align: center;

to #navigation, when I add that in Chrome Devtools the navigation becomes centered.

Answer 2

The css property text-align: center will do it.
But, despite our css era, there is a element property that is still cross-browser. "Align" works for divs, so <div align="center"></div> will center its content.

Answer 3

.jqueryslidemenu > ul is an inline-block object, which behaves as a word in a sentence. You can't apply margin: auto to a word in the middle of a sentence. Adding text-align: center to .jqueryslidemenu or #navigation does the trick though.

Answer 4

Sometimes text-align:center won't work, you can use margin:auto if it has a width!