Wie zentriere ich ein Bootstrap Navbar-Markenlogo?

Zentrieren des Bootstrap-Navbar-Markenlogos

Beim Anpassen einer Bootstrap-Navbar ist die Platzierung des Markenlogos oft ein Problem. Standardmäßig ist das Logo möglicherweise nicht zentriert. Hier sind Schritte, um eine perfekte Zentrierung zu erreichen:

1. Erstellen Sie einen Container für die absolute Positionierung:

   • Wickeln Sie die Navigationsleiste in ein Div mit dem Klasse „navbar“ und setzen Sie ihre Position auf „relativ.“

2. Absolute Positionierung zur Marke hinzufügen:

   • Legen Sie die Position des Markenlogos fest (Klasse „Marke“) zu „absolut“ und seine linke Eigenschaft zu 50 %.

3. Marginanpassung:

   • Fügen Sie der Marke eine negative Margin-Left-Eigenschaft hinzu, die 50 entspricht % der Breite des Logos. Dadurch wird sichergestellt, dass das Logo beim Ändern der Seitengröße zentriert bleibt.

4. Inline-Block-Anzeige:

   • Legen Sie die Anzeigeeigenschaft der Marke fest auf „Blockieren“, damit es richtig mit der anderen Navigationsleiste übereinstimmt Elemente.

Hier ist das überarbeitete CSS:

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

Dieser Ansatz positioniert das Markenlogo effektiv in der Mitte und behält gleichzeitig die Integrität des Navigationsleistenlayouts bei.

Das obige ist der detaillierte Inhalt vonWie zentriere ich ein Bootstrap Navbar-Markenlogo?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!