Aligning a ul to the middle for horizontal CSS menus - css

Question

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!

Answer 1

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

Answer 2

Change #menu ul - use float: left instead of float: right
#menu ul {
margin: 0;
display: block;
text-align: center;
padding: 0;
float: left;
}

Answer 3

I fixed your problem.
The html code is alright and i changed the css code:
#menu
{
clear: both;
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;
}
#menu li {
/*font-family: Georgia, "Times New Roman", Times, serif;*/
font-family: sans-serif, Helvetica, Arial;
font-size: 13px;
font-weight: normal;
position: relative;
list-style: none;
margin: 0;
display: inline-block;
padding: 0;​
I basically deleted any occurrency of float:right;. Fixing your problem is as simple as this.
Here's a DEMO.
If you need further assistance i can help you.
I also suggest you a few link that you can find useful for building css menus:
http://csswizardry.com/2011/02/creating-a-pure-css-dropdown-menu/
http://net.tutsplus.com/tutorials/html-css-techniques/how-to-create-a-drop-down-nav-menu-with-html5-css3-and-jquery/
http://net.tutsplus.com/tutorials/html-css-techniques/how-to-build-a-kick-butt-css3-mega-drop-down-menu/
http://net.tutsplus.com/tutorials/design-tutorials/how-to-build-and-enhance-a-3-level-navigation-menu/

Answer 4

The simplest code to position Your menu, is quite simple.
This code works correctly, tested on latest Safari, Chrome, Opera, Firefox. Also on IE11 and IE8.
http://jsfiddle.net/5ZrEx/
#menu
{
width: 830px;
margin: 0 auto;
display: inline;
}
#menu ul {
text-align: center;
}
#menu li {
display: inline-block;
}