How to center something vertically within a box?, CSS Options

[NovaArgon]

Hello this is a box that holds my nave bar

CODE

#nav_container {
    height: 68px;
    width: 100%;
    margin: 0 auto;
        background: url(http://www.gamerunion.com/forum/styles/IR_bright/imageset/menubar.png) repeat-x;
}

I am trying to center this navbar vertically do you see what I need to change in my css? its already in the center horizontally

CODE

#navbar {
    height: 37px;
    width: 500px;
    margin: 0 auto;
}

Thanks for the help

[NovaArgon]

This seems to be working ok so I guess I got it. Thanks for the help

#navbar {
height: 37px;
width: 500px;
margin: 0 auto;
padding-top: 15px;
}

Thanks for the help

[Frederiek]

Just put margin: auto auto; and everything should center.

See also http://www.w3.org/Style/Examples/007/center

[Christian J]

This seems to be working ok so I guess I got it. Thanks for the help

#navbar {
height: 37px;
width: 500px;
margin: 0 auto;
padding-top: 15px;
}

Note that this relies on the padding and text height adding up with the #navbar height. If the user changes text size or if the text line-breaks it may fall apart.

Why not use equal top and bottom padding/margin, and let the height of both boxes vary depending on text size?

[Christian J]

Just put margin: auto auto; and everything should center.

Not vertically?

See also http://www.w3.org/Style/Examples/007/center

Yes but the bottom example: http://www.w3.org/Style/Examples/007/center#vertical

Alas "display: table-cell" is not supported by MSIE yet.

[NovaArgon]

Thanks for the help. I'll try out and see but i'm using buttons so its not effected by users changing the text size.

[pandy]

Since both boxes have a a hight and they won't contain anything that can expand that height, why not position the inner box relative the outer?