it-swarm.com.de

Wie zentriere ich Navbar-Elemente vertikal (Twitter Bootstrap)?

Dies ist mein CSS/LESS CSS-Code bisher:

//make navbar taller
@navbarHeight: 60px;

//make navbar link text 18px
.navbar-inner {
    font-size: 18px;
}

//make navbar brand text 36px
.navbar .brand {
    font-size: 36px;
}

Was produziert das:

enter image description here

FYI Ich benutze den Twitter Bootstrap-Demo-Code. Ich habe die HTML-Datei nicht geändert (abgesehen von der Änderung des Markennamens).

Wie Sie sehen, ist der Markenname vertikal in der Navigationsleiste zentriert, so wie es sein sollte, die Navigationslinks sind jedoch nicht (sie sind nach oben etwas höher). Das Problem wurde erst deutlich, als ich die Höhe der Navbar verändert hatte. Wie kann ich sie vertikal zentrieren lassen (z. B. diese Website)?

Wenn es eine Hilfe ist, zeigt das Hervorheben der Elemente in Chrome Folgendes:

enter image description here

19

Die .brand-Klasse verwendet einen anderen line-height als den im gesamten Bootstrap verwendeten Basistext sowie einige andere wichtige Unterschiede.

Relevante Teile aus der originalen Bootstrap-Navigationsleiste LESS -

Für .brand:

.brand {
  // Vertically center the text given $navbarHeight
  @elementHeight: 20px;
  padding: ((@navbarHeight - @elementHeight) / 2 - 2) 20px ((@navbarHeight - @elementHeight) / 2 + 2);
  font-size: 20px;
  line-height: 1;
}

Für Links in der Navbar:

.navbar .nav > li > a {
  @elementHeight: 20px;
  padding: ((@navbarHeight - @elementHeight) / 2 - 1) 10px ((@navbarHeight - @elementHeight) / 2 + 1);
  line-height: 19px;
}

Sie müssen wahrscheinlich mit den Werten von @elementHeight, line-height und möglicherweise padding herumspielen, damit der .navbar .nav > li > a-Selektor den größeren 60px @navbarHeight widerspiegelt (diese Standardwerte sind für einen 40px @navbarHeight gedacht). Versuchen Sie es vielleicht mit einem 40px @elementHeight und/oder einer 29px Zeilenhöhe.

7
wisew

Wenn die obige Antwort nicht hilft und Sie die HTML-Datei nicht berührt haben, kann ich nur an die CSS denken. Sie können sich die im Bootstrap-Beispiel verwendeten css ansehen und die Größen von .navbar-inner und .navbar .brand entsprechend ändern.

0
consprice

Ich hatte gerade ein ähnliches Problem mit Bootstrap 3, aber mit der Marke Eliment. Am Ende habe ich folgende CSS verwendet:

.navbar-brand {
  font-size: 3em;
  line-height: 1em;
}

Meine Navigationsleiste wurde durch ein 50px-Bild vergrößert, wobei der obere und untere Rand 10px beträgt. Nicht sicher, ob das eine Hilfe ist.

0
mattauckland

Sie können dies versuchen:

display: table-cell;

0
Sllix