besoin d'aligner les éléments de la liste au centre de la div

Je veux aligner une liste de liens à être centré à l'intérieur d'un div.

J'ai essayé margin: 0 auto, mais pas de chance.

Remarque: la navigation-wrapper div doit rester en place, c'est juste l'extrait de code html qui est un sujet de préoccupation.

Vérifier http://jsfiddle.net/bkmorse/aaCY7/ de voir les liens que j'ai besoin d'aligner correctement dans le div.

html

<div id="navigation-wrapper">
  <ul id="top-navigation">
    <li><a href="">Home</a></li>
    <li><a href="">Volunteer</a></li>
    <li><a href="">Support</a></li>
    <li><a href="">Educate</a></li>
    <li><a href="">Contact</a></li>
    <li><a href="">Gift Shop</a></li>
    <li><a href="">Directions</a></li>
  </ul>
</div>

css

#navigation-wrapper {
 width:465px;
 border:1px solid red;
}

#top-navigation {
 margin: 0 auto;
 border:1px solid blue;
 padding:5px 0;
}

#top-navigation li {
 display:inline;
 list-style-type:none;
 margin:2;
}​
  • margin: 0 auto; ne fonctionnera que si vous définissez une largeur fixe.
InformationsquelleAutor Brad | 2012-03-26