Comment centrer un logo de marque Bootstrap Navbar ?

Centrage du logo de la marque Bootstrap Navbar

Lors de la personnalisation d'une barre de navigation Bootstrap, l'emplacement du logo de la marque est souvent une préoccupation. Par défaut, le logo peut ne pas être centré. Voici les étapes pour obtenir un centrage parfait :

1. Créer un conteneur pour un positionnement absolu :

   • Enveloppez la barre de navigation dans un div avec le classe "navbar" et définissez sa position sur "relatif".

2. Ajouter un positionnement absolu à la marque :

   • Définir la position du logo de la marque (classe "marque") à "absolu", et sa propriété de gauche à 50 %.

3. Ajustement de la marge :

   • Ajouter une propriété de marge gauche négative à la marque, équivalente à 50 % de la largeur du logo. Cela garantit que le logo reste centré lors du redimensionnement de la page.

4. Affichage du bloc en ligne :

   • Définissez la propriété d'affichage de la marque. pour "bloquer" pour l'aligner correctement avec l'autre barre de navigation éléments.

Voici le CSS révisé :

.navbar {
    position: relative;
}
.brand {
    position: absolute;
    left: 50%;
    margin-left: -50px !important;
    display: block;
}

Cette approche positionne efficacement le logo de la marque au centre tout en conservant l'intégrité de la disposition de la barre de navigation.

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!