Stuck on how to center text in the navigation

I working a redesign of my current site, and I can’t figure out how to center the text in the navigation. I can float the text over the right or to the left, but I want text to be centered in the link area.

My redesign test page can be found here.

Hi, do these changes :slight_smile:


#nav li{text-align:center;/*will center text*/
#nav li a{float:none;display:block;/*makes it so the text align will work*/}

You don’t actually need the display:block; on the anchor, but if you ever wanted to add vertical padding or what not, keeping that in there will avoid any future problems should you eventually want it :). Taking it out/keeping it in has no difference on the layout.

Thanks again Ryan! :slight_smile:

I added the two lines to my CSS file, and the main menu is now centered just like I wanted it. However now the drop-down menues are being centered. I want the drop-down menus to be left aligned.

You could add this to your style sheet:


#nav li li {text-align: left;}

Major thanks Ralph! :slight_smile:

Sorry I should have checked those dropdowns for you.

Reason why the dropdowns got centered as well is because all the <li>'s were selected in my code. Ralphs selects the dr opdowns and resets it.

Just so you know, and next time you can apply that logic to problems elsewhere on your page :).