Center unordered list in DIV
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.
Answer
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;
}