Maison > Article > interface Web > Comment centrer les liens de navigation de la barre de navigation Bootstrap Twitter ?
La barre de navigation Twitter Bootstrap offre une solution pratique pour la navigation sur les sites Web. Cependant, vous souhaiterez parfois personnaliser son apparence, comme centrer les liens de navigation.
La modification de l'alignement de la barre de navigation nécessite du code CSS. Cependant, certaines méthodes peuvent ne pas donner le résultat souhaité. Explorons la bonne approche.
Pour centrer les éléments du menu de navigation, définissez leur propriété d'affichage sur inline-block au lieu de float : left. Cela permettra aux éléments d’être alignés horizontalement sans casser la mise en page. De plus, définissez la propriété text-align du conteneur interne de la barre de navigation sur center.
<code class="css">.navbar .nav, .navbar .nav > li { float: none; display: inline-block; *display: inline; /* ie7 fix */ *zoom: 1; /* hasLayout ie7 trigger */ vertical-align: top; } .navbar-inner { text-align: center; }</code>
Si vous avez plusieurs barres de navigation sur votre page Web, il est recommandé de créer une classe CSS dédiée pour cibler la barre de navigation spécifique que vous souhaitez centrer. Cela évitera les effets indésirables sur d'autres barres de navigation.
<code class="html"><div class="navbar navbar-fixed-top center"> <div class="navbar-inner"> .... </div> </div></code>
<code class="css">.center.navbar .nav, .center.navbar .nav > li { float: none; display: inline-block; *display: inline; /* ie7 fix */ *zoom: 1; /* hasLayout ie7 trigger */ vertical-align: top; } .center .navbar-inner { text-align: center; }</code>
Il convient de noter que le CSS ci-dessus affectera également les éléments de sous-menu, les obligeant également à être centrés. . Si vous préférez que les éléments de sous-menu soient alignés à gauche, ajoutez le style suivant :
<code class="css">.center .dropdown-menu { text-align: left; }</code>
Voir une démo en direct sur : http://jsfiddle.net/C7LWm/show /
Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!