Center Aligning A Horizontal Navigation Bar
Question
I am having a slight problem aligning my Horizontal Navigation bar to the center of the browser. Now before I put forward this query, I want to indicate that I'm new to HTML and CSS so bear with me on what is undoubtedly a quick fix!
The header and footer are to be full width with a fixed content section in the center of the browser. The navigational bar is to sit underneath the header. At present, the bar is aligning itself to the left but it won't seem to budge without losing its shape.
The HTML:
<body>
<div id="header">
<div class="wrap">
<img src="images/logo_header.png" alt="Image alt." />
</div>
</div>
<div id="nav">
<div class="wrap">
<ul>
<li><a href="#">Option 1</a></li>
<li><a href="#">Option 2</a></li>
<li><a href="#">Option 3</a></li>
<li><a href="#">Option 4</a></li>
<li><a href="#">Option 5</a></li>
<li><a href="#">Option 6</a></li>
</ul>
</div>
</div>
<div id="content"><div class="wrap">Content</div></div>
<div id="footer"><div class="wrap">Footer</div></div>
</body>
and the CSS:
body {
margin:0;
padding:0;
font-family:verdana;
}
.wrap {
position:relative;
margin:0 auto;
width:960px;
}
#header {
float:left;
width:100%;
background-color:#FFCC33;
}
#nav {
float:left;
background-color:#FFCC33;
border-top:2px solid #000000;
}
#nav ul {
list-style:none;
display:inline;
margin:0px;
padding:0px;
}
#nav li {
display:inline;
line-height:1.8em;
}
3 answers
solution1
2 ACCPTED 2011-11-15 00:15:32
try this:
<body>
<div id="header">
<div class="wrap">
<img src="images/logo_header.png" alt="Image alt." />
</div>
</div>
<div class="container">
<div id="nav">
<div class="wrap">
<ul>
<li><a href="#">Option 1</a></li>
<li><a href="#">Option 2</a></li>
<li><a href="#">Option 3</a></li>
<li><a href="#">Option 4</a></li>
<li><a href="#">Option 5</a></li>
<li><a href="#">Option 6</a></li>
</ul>
</div>
</div>
</div>
<div id="content"><div class="wrap">Content</div></div>
<div id="footer"><div class="wrap">Footer</div></div>
</body>
.container{width:980px;margin:0 auto;text-align:center;}
.nav{float:left; text-align:left;}
solution2
1 2011-11-15 00:04:41
If you add a style of:
#nav .wrap {text-align:center; }
This will center align the nav links.
See this fiddle .
solution3
0 2016-07-31 21:42:47
try doing this For HTML
<nav class="computer">
<div class="container">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">portfolio</a></li>
<li><a href="#">About</a></li>
<li><a href="#">services</a></li>
<li><a href="#">contact</a></li>
</ul>
</div>
</nav>
for css:
nav{
width: 100%;
.container{
width: 50vw;
margin: 0 auto;
ul{
text-align: center;
li{
width: 10vw;
}
}
}
}
as i had 5 items i used 50 vw for container and 10 vw for each items.. this align the navbar perfectly centered. dont remember to use the meta tag for viewport
<meta name="viewport" content="width=device-width, initial-scale=1"/>
NOTE: i am using LESS here for css
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.