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

Centrage du logo de la marque dans la barre de navigation Bootstrap

Vous essayez de créer une barre de navigation Bootstrap 3 avec un logo de marque persistant aligné au centre. Votre approche actuelle utilisant le style de classe « brand » aligne partiellement le logo mais perturbe la disposition des autres éléments de la barre de navigation.

Pour résoudre ce problème, envisagez une stratégie alternative :

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

Ce CSS :

1. Définit le .navbar sur position : relative pour permettre le positionnement absolu de ses enfants.
2. Positions le .brand absolument et le centre à gauche : 50 % ;.
3. Définit la marge gauche à -50px (ajuste en fonction de la moitié de la largeur de votre logo) pour contrecarrer la position centrée et empêcher le logo de bouger. centrer lors du zoom.

Cette approche corrige le problème et fournit un centrage précis du logo sans interférer avec les autres éléments de la barre de navigation. Vous pouvez vous référer au Fiddle mis à jour pour un exemple fonctionnel.

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!