Comment aligner de manière centralisée un float: left ul/li menu de navigation avec le css?
J'ai donc le code CSS suivant dans la place pour afficher une barre de navigation horizontale à l'aide de:
.navigation ul {
list-style: none;
padding: 0;
margin: 0;
}
.navigation li {
float: left;
margin: 0 1.15em;
/* margin: 0 auto;*/
}
.navigation {
/* width: auto;*/
/* margin: 0 auto;*/
text-align: center;
}
Ma question est: comment faire pour aligner la barre de navigation centrale au-dessus du titre?
- Tu n'osaient appeler le trait d'union-site? Tu es banni de cette terre. 😉 (Blague! NetHack les joueurs peuvent reconnaître la première phrase.)
Vous devez vous connecter pour publier un commentaire.
Donner votre .navigation ul d'une largeur et d'utiliser margin:0 auto;
Voici un solution qui ne nécessite pas de spécifier la largeur de votre ul.
Bien, pour utiliser
margin:0 auto
sur quelque chose, il doit avoir une largeur définie. Probablement la meilleure solution de contournement est:display: inline-block
si vous souhaitez utiliser cette méthode, mais encore être en mesure d'utiliserborder
,background
, et d'autres propriétés d'un bloc.Il y a quelques paramètres comme flotter, marge qui peuvent affecter ce code fonctionne correctement. Il fonctionne dans IE7 trop. J'ai eu ce code de un article au CSS Wizardry.
Vous pouvez définir la
<li>
s'êtredisplay: inline
, puis définisseztext-align: center
sur le<ul>
. En faisant cela, vous pouvez supprimer lefloat: left
à partir de la liste d'objets et que vous n'avez pas besoin d'avoir une largeur fixe pour la barre de navigation comme vous le feriez si vous avez utilisémargin: 0 auto
.Celui-ci fonctionne bien avec moi!
(si je suis correct: IE7+)
Violon: http://jsfiddle.net/fourroses666/zj8sav9q/3/
Si vous souhaitez continuer à utiliser votre flottait LI dans votre code, vous pouvez utiliser ceci:
JSFiddle: https://jsfiddle.net/Lvujttw3/