I am trying to have a horizontal menu, but the ul is aligned to the right instead of in the middle.
Here are my CSS and HTML:
CSS:
#menu
{
clear: both;
float: left;
width: 830px;
display: inline;
position: relative;
z-index: 1;
border-top: 1px solid #e9e6d9;
border-bottom: 1px solid #e9e6d9;
margin: 0 auto;
background-color:#FFFFFF;
padding: 0;
}
#menu ul {
margin: 0;
display: block;
text-align: center;
padding: 0;
float: right;
}
#menu li {
/*font-family: Georgia, "Times New Roman", Times, serif;*/
font-family: sans-serif, Helvetica, Arial;
font-size: 13px;
font-weight: normal;
float: left;
position: relative;
list-style: none;
margin: 0;
display: inline-block;
padding: 0;
}
HTML:
<div id="menu">
<ul>
<li>
<a href="http://www.tahara.es/">
<span>HOME</span>
</a>
</li>
<li>
<a href="http://www.tahara.es/shop/">
<span>SHOP</span>
</a>
</li>
</ul>
</div>
Thanks in advance for any suggestion!
You can remove your float properties. Just add a width to your #menu ul and add margin : 0 auto; to make it centered.
Example :
#menu ul {
width: 300px;
margin: 0 auto;
}
Live demo here : http://codepen.io/joe/pen/uAaHo