I'm trying to center a dynamicly generated ul list as a menu/navigation (unknown width).. I would use display:inline; & center tags, but I'm using display:block; to highlight the background on hover, so I have float:left; to get the items in a row... I can't find a way to center the list without knowing the width..
Please don't say use tables.
<style>
.nav, #nav {
width: 400px;
height: inherit;
text-align: center;
margin: 0px auto;
border: 1px solid red;
}
#menu, #menu ul {
text-align: center;
margin: 0px auto;
list-style: none;
overflow: hidden;
}
#menu a {
color:white;
background:black;
padding: 20px;
}
#menu li {
float: left;
background:black;
color: white;
display: block;
}
#menu li:hover a {
color: black;
background:white;
}
</style>
<div class='nav'>
<ul id='menu'>
<li><a href=''>a</a></li>
<li><a href=''>b</a></li>
<li><a href=''>c</a></li>
</ul>
</div>
Thank you in advance
Edit: nevermind I figured it out just after posting this! After 2 hours of raking my brain.... my bad
