Comment centrer nav dans div

Question

J'essaie de centrer la barre de navigation au milieu du div diviseur. Je veux que la barre de navigation passe d'un côté de la div à l'autre mais que la liste dans le ul soit centrée au milieu de la div si cela a du sens. Je n'arrive pas à comprendre, même après avoir essayé des exemples en ligne. Merci

body { 
 
    margin: 0px; 
 
    padding: 0px; 
 
    background-color: #505050 ; 
 
} 
 

 
#body { 
 
    width: 75%; 
 
    margin: 0 auto; 
 
    position: center; 
 
    background-color: #C0C0C0; 
 
    height: 100%; 
 
} 
 

 
.nav { 
 

 
} 
 
.nav ul { 
 
    background-color: #CCCCCC; 
 
    width: 100%; 
 
    padding: 0; 
 
    text-align: center; 
 

 
} 
 

 
.nav li { 
 
    list-style: none; 
 
    font-family: Arial Black; 
 
    padding: 0px; 
 
    height:40px; 
 
    width: 120px; 
 
    line-height: 40px; 
 
    border: none; 
 
    float: left; 
 
    font-size: 1.3em; 
 
    background-color: #CCCCCC; 
 
    display:inline; 
 

 
} 
 

 
.nav a { 
 
    display: block; 
 
    color: black; 
 
    text-decoration: none; 
 
    width: 60px; 
 

 
}

<div id="body"> 
 
    <h2>Hello World!</h2> 
 
    <div class="nav"> 
 
     <ul> 
 
      <li><a href="#">Home<a></li> 
 
      <li><a href="#">About<a></li> 
 
      <li><a href="#">News<a></li> 
 
      <li><a href="#">Contact<a></li> 
 
     </ul> 
 
    </div> 
 
</div>

Answer 1

i fixer ici attache http://jsfiddle.net/o4716uo9/

utilisation inline-block pour li

Answer 2

background propriété doit être paramétré dans l'élément ul, li pas, dans votre cas. Supprimez le float dans nav li. De plus, l'élément a n'est pas fermé correctement. Principaux changements:

.nav ul { 
    background-color: #cccccc; 
    text-align: center; 
} 

.nav ul li { 
    display: inline-block; 
    min-width: 120px; 
    [...] 
} 

je vous conseille de jeter un oeil à la bootstrap framework. Cela pourrait être intéressant pour toi.

Answer 3

Il y a deux choses que vous pouvez changer pour corriger le problème:

1) Vos <a> éléments ont une largeur de 60px. Vous pouvez supprimer ceci.

2) Vous .nav li a une largeur de 120px. Je changerais ceci en 25% (s'il y a seulement quatre éléments de navigation).

http://jsfiddle.net/xLnz90ek/

Est-ce que plus près de l'effet désiré.

Answer 4

Est-ce ce que vous essayez de faire?

* { margin:0; padding:0 } 
 

 

 
html { 
 
    background-color: #505050; 
 
    font-size: 4vw; 
 
} 
 

 
header { 
 
    width: 75%; 
 
    margin: 0 auto; 
 
    background-color: #C0C0C0; 
 
} 
 

 
nav { 
 
    background-color: #CCCCCC; 
 
    display: flex; 
 
    padding: 0.2rem 0; 
 
} 
 

 
nav a { 
 
    flex: 1 0 auto; 
 
    font-family: Arial Black; 
 
    font-size: 1rem; 
 
    background-color: #CCCCCC; 
 
    color: black; 
 
    text-decoration: none; 
 
    text-align: center; 
 
    margin: 0 0.3rem; 
 
}

<header> 
 
    <h2>Hello World!</h2> 
 
    <nav> 
 
    <a href="#">Home</a> 
 
    <a href="#">About</a> 
 
    <a href="#">News</a> 
 
    <a href="#">Contact</a> 
 
    </nav> 
 
</header>