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.
Vous devez vous connecter pour publier un commentaire.
Modifier votre CSS pour cela. Qui fonctionne.
Margin:auto
de travail à définirwidth
.Écrire comme ceci:cochez cette http://jsfiddle.net/aaCY7/1/
Depuis votre navigation supérieur ul ne pas avoir une largeur définie, il est en fait centrée. Cependant, le li à l'intérieur de ce sont pas. Si vous voulez voir ces articles centrés puis
Si vous voulez que la liste centré dans le div, mais encore à gauche aligner les choses à l'intérieur, utilisez ce
ou faire les deux si une combinaison des deux est nécessaire.
j'ai juste besoin de savoir l'affichage en ligne pour la li éléments qui woked pour moi. Dans le cas où le centre de l'aligner, nous pouvons ajouter tex-align: center dans la div principale. Dans le cas ci-dessus
#top-navigation {
margin: 0 auto;
border:1px solid blue;
padding:5px 0;
text-align: center;
}
Cela devrait fonctionné