Centring a horizontal Navbar

Hi.

I really want to centre this navbar but it just isn’t happening. I’ve stripped the code down as much as possible but left in a border to see what is happening.

As you can see I have recently been on the html5 course but that isn’t the issue, tried it the old way, same problem. Tried everything, text-align: centre;.

I can get it slightly off centre but I want it bang-on! Can’t understand this. I could add a bit of padding to kind of centre it manually but I really want to know what it is I’m doing wrong so I can note it down for future code.


<!DOCTYPE HTML>
<html>
<head>
<title></title>
</head>
 
<style>
ul#navigation {
margin:0px auto;
border: 1px solid black;
padding: 0;
display: inline-block;
}

ul#navigation li {
display: inline;
border-left: 1px solid gray;
float: left;
list-style: none;
}

ul#navigation li:first-of-type {
border-left: none;
}

ul#navigation li a:link {
padding: 5px;
text-decoration: none;
color: gray;
}
</style>
<body>
<nav role="navigation">
<ul id="navigation">
<li><a href="">Home</a></li>
<li><a href="">Heritage</a></li> 
<li><a href="">Conservatories</a></li> 
<li><a href="">Garden Decor</a></li>
<li><a href="">Ornamental</a></li>
<li><a href="">General</a></li> 
<li><a href="">Lead Specifications</a></li>
<li><a href="">Contact</a></li>
<div style="clear: both;"></div>
</ul>
</nav>
</body>
</html>

Karl.

Thanks all!

  1. <style> elements should be inside the <head>, not after it.
  2. You can’t have a <div> as a direct child of <ul>

1). Typo
2). Just a quick temp hack to stop the border collapsing while I was trying al-sorts of hacks, floats or whatever, late last night.

At last it works…:slight_smile:

Karl

Here ya go… How to center your navigation menu.

A couple of issues with that markup:

  1. <style> elements should be inside the <head>, not after it.
  2. You can’t have a <div> as a direct child of <ul>
    I don’t know what that clearing <div> is doing inside the <ul>, but I would get rid of that, for a start.

The way I have achieved a centred menu is with this:

#navigation {
	margin:0;
	padding:0;
	list-style-type:none;
	width:100&#37;;
	text-align:center;}

#navigation li {
	display:inline;
	margin:0;
	padding:0;}

(That’s just with a plain old <ul> though, no <nav>, although I wouldn’t have thought that should make a difference)

Oooh - just a thought - in your message, you’ve said you tried text-align:centre. Did you manage to spell it wrong properly (ie center) when you used it in the code?

hi,

i’d usually contain the whole thing within a wrapper that i’d center, try this…

<!DOCTYPE HTML>
<html>
<head>
<title></title>
</head>
 
<style>
div#wrapper{
	margin:auto;
	width:600px;;
}

ul#navigation {
margin:0px auto;
border: 1px solid black;
padding: 0;
display: inline-block;
}

ul#navigation li {
display: inline;
border-left: 1px solid gray;
float: left;
list-style: none;
}

ul#navigation li:first-of-type {
border-left: none;
}

ul#navigation li a:link {
padding: 5px;
text-decoration: none;
color: gray;
}
</style>
<body>
<div id="wrapper">
<nav role="navigation">
<ul id="navigation">
<li><a href="">Home</a></li>
<li><a href="">Heritage</a></li> 
<li><a href="">Conservatories</a></li> 
<li><a href="">Garden Decor</a></li>
<li><a href="">Ornamental</a></li>
<li><a href="">General</a></li> 
<li><a href="">Lead Specifications</a></li>
<li><a href="">Contact</a></li>
<div style="clear: both;"></div>
</ul>
</nav>
</div>
</body>
</html>