Center unordered list in DIV

Asked 3/1, 2013 at 20:33 Answered 29/9, 2015 at 5:39

First of all, I know this question has been asked a MILLION times...and I've looked at this one specifically as well as several others on this site and other sites. I've tried a ton of different variations on each of these and still can't get it to work.

I'm trying to center an unordered list. It displays correctly, it's just not centered. At the moment, it's CLOSE to center...but if you change the "width" parameter in the .nav-container code in the CSS then it shifts the position of the div.

Here is my CSS:

    html *{
  font-family: Verdana, Geneva, sans-serif;
}
body {
  padding:0px;
  margin:0px;
}
.nav-container {
  width:460px;  
  margin: 0 auto;
}
.nav-container ul {
  padding: 0px;
  list-style:none;
  float:left;
}
.nav-container ul li {
  display: inline;
}
.nav-container ul a {
  text-decoration:none;
  padding:5px 0;
  width:150px;
  color: #ffffff;
  background: #317b31;
  float:left;
  border-left: 1px solid #fff;
  text-align:center;
}
.nav-container ul a:hover {
  background: #92e792;
  color: black;
}
#add-form .add-button, #tutor-list .tutor-button, #admin .admin-button {
  color: #ffffff;
  background: #12b812;
}

And here is my HTML:

<body id="admin">

<div id="header">
<center><h2>OMS Tutoring Database</h2></center>
</div>
<div class="nav-container">
<ul>
  <a class="tutor-button" href="tutoring.php"><li>Tutoring List</li></a>
  <a class="add-button" href="addform.php"><li>Add Students</li></a>
  <a class="admin-button" href="admin.php"><li>Admin</li></a>
</ul>
</div>

<div id="content"></div>

</body>

I'm sure it's some glaringly simple error, but any help would be much appreciated. Oh, and I'm currently viewing it in Chrome as I'm testing it.

jsFiddle

Provenance answered 3/1, 2013 at 20:33 Comment(2)

Two notes: You have your list items wrapped into <a>-tags. That is not valid HTML - you should use it like this: <li><a></a></li>. And you can create a fiddle of your problem, so that someone can easily see your problem and try things on the fly. I've created one for your: jsfiddle.net/GLyEB – Fleeting 3/1, 2013 at 20:39

Sorry about that. I went back and fixed the code to put the <a> tages inside of the <li> tags. I still have the same issue. – Provenance 3/1, 2013 at 20:55

Your HTML is incorrect. The <a> tags should be inside the <li> tags. To make the list items be inline, set float: left on them, and overflow: hidden to the <ul> so it fits its children. Remove the float on .nav-container, its unecessary. Take a look at this codepen.
And the nav moves when you change its width because it you centered the wrapper but not the nav itself. You can remove width and margin: 0 auto and try:

.nav-container {
    text-align: center;
}
.nav-container ul {
    display: inline-block;
}

Followup answered 3/1, 2013 at 20:45 Comment(0)

The problem was that you were assigning fixed widths to the li's of 150px.. Instead you should have assign the width to 33% and also assign the width of the ul to 100%, this way, no matter what size the div is, the three li's will be centered perfectly :)

Here's the updated JSFIDDLE

.nav-container ul {
  padding: 0px;
  list-style:none;
  float:left;
  width: 100%
}
.nav-container ul li {
  display: inline;
}
.nav-container ul a {
  text-decoration:none;
  padding:5px 0;
  width:33%;
  color: #ffffff;
  background: #317b31;
  float:left;
  border-left: 1px solid #fff;
  text-align:center;
}

Venola answered 3/1, 2013 at 21:21 Comment(0)

The following solution is a bit refined:

   html * {
       font-family: Verdana, Geneva, sans-serif;
   }
   body {
       padding:0px;
       margin:0px;
   }
   .nav-container {
       width:460px;
       margin: 0 auto;
   }
   .nav-container ul {
       padding: 0px;
       list-style:none;
       float:left;
   }
   .nav-container ul li {
       display: inline;
   }
   .nav-container ul a {
       text-decoration:none;
       padding:5px 0;
       width:150px;
       color: #ffffff;
       background: #317b31;
       float:left;
       border-left: 1px solid #fff;
       text-align:center;
   }
   .nav-container ul a:hover {
       background: #92e792;
       color: black;
   }
   #add-form .add-button, #tutor-list .tutor-button, #admin .admin-button {
       color: #ffffff;
       background: #12b812;
   }


<div id="header">
    <center>
         <h2>OMS Tutoring Database</h2>
    </center>
</div>
<div class="nav-container">
    <ul>
         <li><a class="tutor-button" href="tutoring.php">Tutoring List</a></li>
         <li><a class="add-button" href="addform.php">Add Students</a>
         <li><a class="admin-button" href="admin.php">Admin</a></li>
    </ul>
</div>

Try it at: http://jsfiddle.net/hg9qvL70/2/

Banks answered 29/9, 2015 at 5:39 Comment(0)

Recommended topics

Hot tags