Centering listed items

HTML & CSS
1

hello,
I am working on a page and i want to center the navigation. right now its showing to left side. i tried couple of things but failed. what am i missing or have that isn’t letting in center of the div? www[dot]genuinelyjanestudios[dot]ammarworx[dot]com/

2

There are some fancy centering tricks around the place, but with a fixed width setup like you have, you might as well just put a bit of left margin on the UL and be done with it. E.g.

nav ul {margin-left: 38px;}
3

You could use inline-block to center the menu items instead of using float:




.nav-container ul.top-nav{
text-align:center;
float:none;
display:block;
}
.nav-container ul.top-nav li{
float:none;
display:inline-block;
*display:inline;/* ie6/7 hack*/
zoom:1.0;
vertical-align:top;
}

However as Ralph said if your menu is fixed at that width then just use a margin to push it over a bit.

4

thanks guys for both ways. but when i do as ralph told me, the submenu that is visible now takes the margin-left :confused: also i see the whole tab isn’t a full block level whereas i did display block

5

HI,

Yes just make it specific to the top level.

e.g.


ul.top-nav{
margin-left:5px;
}

Ralph’s code will hit all nested uls as well but I guess he didn’t realise that there were drop down menus inside.

6

Indeed. Sorry about that. :slight_smile:

7