Comment centrer un logo de marque dans une barre de navigation Bootstrap 3 ?

Garder le logo de la marque centré dans la barre de navigation Bootstrap

Vous pouvez obtenir un logo de marque centré dans la barre de navigation Bootstrap 3 en utilisant une stratégie de positionnement personnalisée. Bien que le code fourni offre un design décent, il perturbe l'alignement des autres éléments de la barre de navigation.

<a class="brand">

Pour résoudre ce problème, considérez le CSS suivant :

.navbar {
    position: relative;
}
.brand {
    position: absolute;
    left: 50%;
    margin-left: -50px !important;  /* 50% of your logo width */
    display: block;
}

Cette approche :

• Positionne le conteneur de la barre de navigation comme relatif.
• Définit le logo de la marque sur une valeur absolue position.
• Centre le logo horizontalement en définissant à gauche : 50 % et en décalant avec la moitié de la largeur du logo (marge gauche : -50 px).
• Ajuste la marge gauche avec !important pour remplacer celle de Bootstrap. paramètres par défaut.

Cela garantit que le logo reste centré même pendant zoom.

Fiddle : [https://fiddle](link)

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!