Center Aligning A Horizontal Navigation Bar
42,210
Solution 1
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;}
Solution 2
If you add a style of:
#nav .wrap {text-align:center; }
This will center align the nav links.
See this fiddle.
Author by
Galeforce
Updated on July 09, 2022Comments
-
Galeforce almost 2 years
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; }