Wie zentriere ich ein Markenlogo in einer Bootstrap 3-Navigationsleiste?

Markenlogo in der Bootstrap-Navigationsleiste zentriert halten

Mit einer benutzerdefinierten Positionierungsstrategie können Sie ein zentriertes Markenlogo in der Bootstrap 3-Navigationsleiste erreichen. Der bereitgestellte Code bietet zwar ein anständiges Design, stört jedoch die Ausrichtung anderer Navigationsleistenelemente.

<a class="brand"></a>

Um dies zu beheben, ziehen Sie das folgende CSS in Betracht:

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

Dieser Ansatz:

• Positioniert den Navigationsleistencontainer als relativ.
• Setzt das Markenlogo auf einen absoluten Wert Position.
• Zentriert das Logo horizontal durch Einstellen von links: 50 % und Versetzen mit der halben Logobreite (Rand links: -50 Pixel).
• Passt den Rand links mit !important an, um Bootstraps zu überschreiben Standardeinstellungen.

Dadurch wird sichergestellt, dass das Logo auch während des Vorgangs zentriert bleibt Zoomen.

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

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