Comment centrer l'élément flottant?

Question

J'essaie de centrer mon menu qui contient le menu ul.

Le menu est flottant vers la gauche et je n'arrive pas à centrer le menu au milieu de l'écran.

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; 
} 

Quelqu'un peut-il me aider à ce sujet? Merci beaucoup!

Answer 1

Vous aimez cette

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 2

Vous pouvez utiliser la boîte flex:

section { 
    text-align:center; 
    margin:0 auto; 
    display: flex; 
} 

est ici un violon: http://jsfiddle.net/2c8LB/

Answer 3

Comme l'a souligné xec, le problème semble être avec la syntaxe de commentaires non valide. La syntaxe correcte pour les commentaires en CSS est /*Comment Here */. Lorsque la syntaxe du commentaire est corrigée, votre code centre le menu.

/*the and margin text align doesn't seem to work...*/ 
section { 
    text-align:center; 
    margin:0 auto; 
} 

Demo

Answer 4

Vous n'êtes pas le styling nav. Le nav à l'intérieur du section est un bloc, et donc ce sera la pleine largeur de son conteneur, que vous lui donniez le conteneur margin:0 auto ou non.

Solution: Donnez au nav le même style que le section. Ou, enlevez le section tout à fait, puisqu'il n'est pas nécessaire ici.

Answer 5

Essayez ceci:

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; 
} 

Answer 6

Si vous ne se préoccupe pas particulièrement IE 7 et sous (qui ont seulement un soutien partiel pour inline-block - voir http://caniuse.com/inline-block), cela fonctionne, et a l'avantage de rendre les liens plus faciles à atteindre: 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; 
}