HEALP! Vertically center my nav!

Samuel235 · 03-27-2011, 12:01 PM

Hey guys,

I have a nav which is contained inside of a containing DIV that stretches across 100% of the page with a background. The nav is inside of a div that is inside of the container, the nav DIV will not move with padding/margin, its aligned centeral in the middle but yet wont move vertically....

HTML and CSS below, i just need the NavContainer to be vertically centered inside of the Navcontainer.....

HTML

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
 <title>BigLampPhotography.co.uk</title>
 <link rel="stylesheet" type="text/css" href="main.css" />
 <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
</head>
<body>
 <div id="Navcontainer">
 <div id="Nav">
<ul>
<li><a href="#"><img src="images/navhome.png" alt=""/></a></li>
<li><a href="#"><img src="images/navportraits.png" alt=""/></a></li>
<li><a href="#"><img src="images/navgallery.png" alt=""/></a></li>
<li><a href="#"><img src="images/navcrazy.png" alt=""/></a></li>
<li><a href="#"><img src="images/navcontactus.png" alt=""/></a></li>
<li><a href="#"><img src="images/navsales.png" alt=""/></a></li>
</ul>
 </div><!-- end of #Nav -->
 </div><!-- end of #Navcontainer -->

CSS

Code:

* {
 margin:0;
 padding:0;
}

img {
border:none;
}

body {
}

ul{
list-style-type:none;
font-size: 0px;
}

/***** NAVBAR STYLES *****/

#Navcontainer{
background-image: url("images/navbg.png");
background-repeat: repeat-x;
height: 69px;
text-align:center;
vertical-align: middle;
border: 1px solid red;
}

#Nav {
border: 1px solid red;
width: 902px;
height: 12px;
margin: 0 auto;
text-align: center;
}

#Nav ul {
list-style-type: none;
}

#Nav li {
display:inline;
margin-right: 25px;
}

SB65 · 03-27-2011, 01:41 PM

Code:

#Nav {
    border: 1px solid red;
    height: 12px;
    margin: 28px auto 0;
    text-align: center;
    width: 902px;
}

If both #Nav and #Navcontainer have fixed heights this should work fine,

Samuel235 · 03-27-2011, 02:37 PM

Thanks for that

Works a charm!