CSS: centrer un div dans une barre de navigation

-1

J'ai des problèmes étranges centrant un div dans un autre div. Je tentais de faire une barre de navigation, voici le code html:CSS: centrer un div dans une barre de navigation

<body> 
    <div class="nav"> 
     <div class="navbar"> 
      <ul> 
       <li><a href="#">Home</a></li> 
       <li><a href="#">Our Story</a></li> 
       <li><a href="#">Gallery</a></li> 
       <li><a href="#">Our Future</a></li> 
       <li><a href="#" class="right">Join us</a></li> 
       <li><a href="#" class="right">Contact</a></li> 
      </ul> 
     </div> 
    </div>

Et le css correspondant:

.nav{ 
width:100%; 
} 
.navbar { 
width:75%; 
height:50px; 
margin: 0 auto; 
background-color:#E64888; 
position:fixed; 
}

si cela ne fonctionne pas dans aucun de mes navigateurs Chrome, Firefox, C'est à dire ... Le bar est juste assis du côté gauche. J'ai également essayé la méthode "margin-left: auto, margin-right: auto", mais ne fonctionnait toujours pas. C'est vraiment ennuyeux, parce que je ne peux pas comprendre ce qui s'est mal passé. Merci d'avance.

Source

2014-06-19 Austin at CA

Si vous voulez que le principal nav ul à centrer, vous devez définir son parent (dans ce cas html et body) pour avoir la largeur. Sinon, vous devez gérer les dimensions et le type de disposition (display) sur le li et le list-style-type sur les éléments ul li (donc vous ne voyez pas les points).

Il y a aussi un rembourrage sur la ul (qui est ce que les espaces les li s à droite quand il est une liste normale) que vous devez traiter, ou il apparaît trop loin vers la droite (et « décentré ») .

body, html { 
    width: 100%; 
    margin: 0; 
    padding: 0; 
} 
.nav { 
    width: 100%; 
} 
.navbar ul { 
    width: 75%; 
    height: 50px; 
    margin: 0 auto; 
    padding: 0; 
    background-color: #E64888; 
    list-style-type: none; 
    text-align: center; 
} 
.navbar ul li { 
    display: inline; 
    padding: 0; 
    margin: 0; 
}

http://jsfiddle.net/97B52/

Source

2014-06-19 23:38:23

Essayez: (Pour autant que je compris votre question):

.nav li {list-style: none; display: inline-block; }

Working Fiddle

Source

2014-06-19 23:37:58 Jatin

Si vous regardez, il est pas vraiment centré soit dans le '' ul' ou les li's dans le 'ul'. –

CSS: centrer un div dans une barre de navigation

Répondre

Questions connexes