Vertically Centering an Inline List in a Div

[JBottero]

I'm having trouble understanding how to vertically center an inline list in a div. Can anyone recommend some reading?

The list is used for a horizontal nav bar with a background. I've set the height of the div to 20px because that's the height of the bg image.

Also: Should the font specs be where they are (#nav ul) or maybe in the #nav section?

Here's the code:


#nav {
background: url(../images/nav_bg2.gif);
text-align: center;
overflow: hidden;
height: 20px;
}
#nav ul{
margin:0;
padding:0;
list-style:none;
}
#nav li{
font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
font-size: 0.75em;
display:inline;
margin:0;
padding:0;
}

[boogyman]

are you talking about vertical-align: (http://www.w3schools.com/css/pr_pos_vertical-align.asp) ?

[JBottero]

are you talking about vertical-align: (http://www.w3schools.com/css/pr_pos_vertical-align.asp) ?No, that doesn't work with lists (at least it didn't for me). I think it's for images.

[boogyman]

what exactly are you trying to align? because that will align text vertically in the list

if you are attempting to align the whole list to the "middle" of the div then you could use the same method that you horiztonally align


margin: auto 0;

and as you see their just switched. if you are attempting to center it both vertically and horizontally however, I would stress against this as it is breaking convention and if you are only doing it for a cosmetic look, it is likely to confuse your users. That is why block level elements are defaulted to vertically align to the top of their parent element.

if you just want to create a little bit of whitespace at the top / bottom of the list, you could always just create some padding around the list and it will provide a little bit of a buffer and not look as conjested


#nav ul { padding: 1em; } /* or preferred size */

[JBottero]

The list is in-line, used in a nav bar. The nav bar has a specific hight because it has a bg image. The in-line list should be equal distance from top and bottom, but at least not sitting on the bottom.

[DellGrass]

It is ver easy. Because it have one row so you can be so do "height:20px;line-height:20px;"

It's ok????