How to center the floating element? - css

Question

I am trying to center my menu which contains the ul menu.
The menu is float to the left and I can't seem to center the menu to the middle of the screen.
HTML
<section>
<nav>
<ul>
<li><a href='#'>item1</a></li>
<li><a href='#'>item2</a></li>
<li><a href='#'>item3</a></li>
<li><a href='#'>item4</a></li>
<li><a href='#'>item5</a></li>
</ul>
</nav>
</section>
CSS
nav ul{
display: inline-block;
background-color: red;
}
nav ul li{
list-style: none;
font:bold .6em arial;
float: left;
margin: .3em;
padding: 1.3em;
background-color: #A8A8A8;
}
//the and margin text align doesn't seem to work...
section {
text-align:center;
margin:0 auto;
}
Can anyone help me about it? Thanks a lot!

Answer 1

As pointed out by xec, the problem seems to be with the invalid comment syntax. The correct syntax for comments in CSS is /*Comment Here */. When the comment syntax is corrected, your code does center the menu.
/*the and margin text align doesn't seem to work...*/
section {
text-align:center;
margin:0 auto;
}
Demo

Answer 2

You're not styling the nav. The nav inside the section is a block, and therefore it will be the full width of its container, whether you give the container margin:0 auto or not.
Solution: give the nav the same style as the section. Or, remove the section altogether, since it is not necessary here.

Answer 3

If you don't particularly care about IE 7 and under (which have only partial support for inline-block - see http://caniuse.com/inline-block), this works, and has the advantage of making the links easier to hit: http://jsfiddle.net/V97tR/1/
nav
{
text-align:center;
}
nav ul{
display: block;
background-color: red;
}
nav ul li{
display:inline-block;
list-style: none;
font:bold .6em arial;
margin: .3em;
background-color: #A8A8A8;
}
nav ul li a
{
display:block;
padding: 1.3em;
}

Answer 4

Like this
DEMO
CSS
nav ul{
display: inline-block;
background-color: red;
margin:0;
padding:0;
}
nav ul li{
list-style: none;
font:bold .6em arial;
float: left;
margin: .3em;
padding: 1.3em;
background-color: #A8A8A8;
}
/*the and margin text align doesn't seem to work...*/
section {
text-align:center;
margin:0 auto;
}

Answer 5

You can use flex-box:
section {
text-align:center;
margin:0 auto;
display: flex;
}
Here's a fiddle: http://jsfiddle.net/2c8LB/

Answer 6

Try this:
JSFiddle
#wrapper {
float:left;
width:100%;
background:#fff;
overflow:hidden;
position:relative;
}
nav ul {
clear:left;
float:left;
list-style:none;
margin:0;
padding:0;
position:relative;
left:50%;
text-align:center;
}
nav ul li {
list-style: none;
font:bold .6em arial;
float: left;
background-color: red;
display:block;
list-style:none;
margin:0;
padding:5px;
position:relative;
right:50%;
}
nav ul li a {
display:block;
margin:0 0 0 1px;
padding:3px 10px;
background:#ddd;
color:#000;
text-decoration:none;
line-height:1.3em;
}