Search code examples
htmlcsscenternavigationbar

I want to center my navigation bar in css

Since a couple of days I'm working on a navigation bar for my website. But I want to center it and margin auto does not work. Here's my HTML code: 

<!DOCTYPE html>    
<html>
<head>
  <title>Homepage - Trolltime</title>
  <link rel="stylesheet" type="text/css" href="default.css">
</head>

<body>
  <ul id="nav">
    <li><a href="">Home</a></li>
    <li><a href="">News</a></li>
    <li><a href="">Contact</a></li>
    <li><a href="">About</a></li>
    <li><a href="">About</a></li>
  </ul>
</body>
</html>

And here's my CSS code:

li:hover {font-size:120%}
li:visited{color:black}

ul.nav {
  display: inline-block;
  list-style-type: none;
}

li{
  display:inline;
  float:left;
  margin:auto;
  list-style-type:none;
  font-family:Verdana;
  display:block;
  width:100px;
}
ul { list-style-type:none; }
body { background-color:#33CCFF; }

Thank you.

Solution

  • Working Fiddle

    In html you have used id and in css you have given class to nav. Please see below.

    ul#nav{
display: block;
list-style-type: none;
margin:0 auto;
width:500px;
}