I want to center my navigation bar in css

StackOverflow https://stackoverflow.com/questions/22399165

Question

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.

Was it helpful?

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;
}

OTHER TIPS

Try this code, here example:

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

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

li {
  display:inline !important;
  list-style-type:none;
  font-family:Verdana;
  display:block;
  width:100px;
}
ul { list-style-type:none; }
body { background-color:#33CCFF; }
.wrapMenu{ text-align:center; }
<div class="wrapMenu">
  <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>
</div>

Follow idea as below:

nav ul {
    overflow: auto;
}

nav li {
    list-style-type: none;
    text-align: center;
    cursor: pointer;
    color: #FFFFFF;
}

nav.horizontal {
    display: table;
    margin: auto;
    table-layout: fixed;
    width: 100%;
}

nav.horizontal ul {
    display: table-row;
}

nav.horizontal li {
    display: table-cell;
}

Here's my solution:

I've changed:

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

to:

ul#nav { text-align: center; }

On your li you had both display: inline and display: block;.
So I've deleted: display: block and float: left, and changed display: inline to display: inline-block.

Example

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top