Wie zentriert man ein Markenlogo perfekt in einer Bootstrap 3-Navigationsleiste?

Markenlogo in der Bootstrap-Navigationsleiste zentrieren

Sie versuchen, eine Bootstrap 3-Navigationsleiste mit einem dauerhaften, mittig ausgerichteten Markenlogo zu erstellen. Ihr aktueller Ansatz mit dem Klassenstil „Marke“ richtet das Logo teilweise aus, stört aber das Layout anderer Navigationsleistenelemente.

Um dieses Problem zu beheben, ziehen Sie eine alternative Strategie in Betracht:

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

Dieses CSS:

1. Setzt die .navbar auf Position: relativ, um eine absolute Positionierung ihrer untergeordneten Elemente zu ermöglichen.
2. Positioniert die .brand absolut und zentriert es links: 50 %;.
3. Setzt den linken Rand auf -50 Pixel (passen Sie ihn entsprechend der Hälfte der Breite Ihres Logos an), um der zentrierten Position entgegenzuwirken und zu verhindern, dass sich das Logo außermittig bewegt beim Zoomen.

Dieser Ansatz behebt das Problem und sorgt für eine präzise Logozentrierung, ohne andere Navigationsleistenelemente zu beeinträchtigen. Ein funktionierendes Beispiel finden Sie im aktualisierten Fiddle.

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