Centering Menu html/css [duplicate] - html

Question

This question already has answers here:
how can I center this menu with CSS
(4 answers)
Closed 8 years ago.
I want to center my menu made with html/css but I have no idea how should I do it, I've searched but I can't seem to find the answer
I show you the menu and the desired menu:
http://i.imgur.com/S2tLj8Q.jpg -> http://i.imgur.com/VFyHet8.jpg
This is my html and css code:
<div id='cssmenu'>
<ul>
<li class='active'><a href='index.html'><span>Home</span></a></li>
<li><a href='#'><span>Products</span></a></li>
<li><a href='#'><span>About</span></a></li>
<li><a href='#'><span>Contact</span></a></li>
</ul>
#cssmenu,
#cssmenu ul,
#cssmenu ul li,
#cssmenu ul li a {
margin: 0;
padding: 0;
border: 0;
list-style: none;
line-height: 1;
display: block;
position: relative;
font-family: Corbel;
}
#cssmenu {
width: auto;
height: 59px;
padding-bottom: 4px;
}
#cssmenu.align-right {
float: right;
}
#cssmenu.align-right ul li {
float: right;
margin-right: 0;
margin-left: 4px;
}
#cssmenu.align-right ul li:first-child,
#cssmenu.align-right ul li:first-child > a {
border-bottom-right-radius: 3px;
}
#cssmenu #bg-one,
#cssmenu #bg-two,
#cssmenu #bg-three,
#cssmenu #bg-four {
position: absolute;
bottom: 0;
width: 100%;
border-bottom-left-radius: 3px;
border-bottom-right-radius: 3px;
}
#cssmenu #bg-one {
height: 10px;
background: #0f71ba;
}
#cssmenu #bg-two {
height: 59px;
z-index: 2;
background: url('imgs/menuBG.png');
}
#cssmenu #bg-three {
bottom: 4px;
height: 55px;
z-index: 3;
background: #222222;
background: -moz-linear-gradient(top, #555555 0%, #222222 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #555555), color-stop(100%, #222222));
background: -webkit-linear-gradient(top, #555555 0%, #222222 100%);
background: -o-linear-gradient(top, #555555 0%, #222222 100%);
background: -ms-linear-gradient(top, #555555 0%, #222222 100%);
background: linear-gradient(to bottom, #555555 0%, #222222 100%);
}
#cssmenu #bg-four {
bottom: 4px;
height: 55px;
z-index: 4;
background: url('imgs/menuBG.png');
}
#cssmenu ul {
height: 59px;
}
#cssmenu ul li {
float: left;
margin-right: 4px;
border-top-left-radius: 3px;
border-top-right-radius: 3px;
z-index: 5;
}
#cssmenu ul li a {
padding: 24px 30px 20px 30px;
margin-bottom: 4px;
border-top-left-radius: 3px;
border-top-right-radius: 3px;
color: #eeeeee;
font-size: 15px;
text-decoration: none;
}
#cssmenu ul li:first-child,
#cssmenu ul li:first-child > a {
border-bottom-left-radius: 3px;
}
#cssmenu ul li:hover,
#cssmenu ul li.active {
background: #0f71ba;
background: -moz-linear-gradient(top, #3fa4f0 0%, #0f71ba 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #3fa4f0), color-stop(100%, #0f71ba));
background: -webkit-linear-gradient(top, #3fa4f0 0%, #0f71ba 100%);
background: -o-linear-gradient(top, #3fa4f0 0%, #0f71ba 100%);
background: -ms-linear-gradient(top, #3fa4f0 0%, #0f71ba 100%);
background: linear-gradient(to bottom, #3fa4f0 0%, #0f71ba 100%);
font-weight: bold;
}
#cssmenu ul li a:hover,
#cssmenu ul li.active > a {
background: url('images/bg.png');
color: #ffffff;
}

Answer 1

Very simply, can be done with:
#cssmenu{
text-align:center;
}
#cssmenu ul, #cssmenu ul li{
display:inline-block;
}

Answer 2

Try to add text-align: center; to #cssmenu and display: inline-block; to #cssmenu ul.

Answer 3

Try using display:inline-block for the ul li instead of float left
#cssmenu ul{
text-align:center;
}
#cssmenu ul li{
float:left; //remove this
display:inline-block;
margin-right:0;
}

Answer 4

#cssmenu ul {
height: 59px;
text-align:center
}
#cssmenu ul li {
display:inline-block
margin-right: 4px;
border-top-left-radius: 3px;
border-top-right-radius: 3px;
z-index: 5;
}
remove float from #cssmenu ul li elements,add display:inline-block. and add tex-align center to: #cssmenu

Answer 5

You can use position:absolute and left: 30%
But it is recommended to insert the DIV in another div with position:relative attribute.
Another solution is to use <center> tags.