Bootstrap vertikale Zentrierung in Navbar Ausgabe

Ich habe eine Standard Bootstrap 3 Navbar, die ich versuche, ein größeres als die Navbar-Logo, sowie das Menü zu zentrieren. Ich habe viele vorhergehende SO-Fragen ausprobiert, kann aber keine Lösung finden, die funktioniert.Bootstrap vertikale Zentrierung in Navbar Ausgabe

Ich versuche derzeit, beide eine gleiche Füllung zu geben, um sie vertikal zentriert zu machen, und ich habe auch versucht, den Menüpunkten eine Zeilenhöhe zu geben, aber das funktioniert nicht so gut.

Heres't, was ich derzeit tue:

.navbar-brand, 
.nav { 
    padding: 20px 0; 
}

Hier ist mein Code: https://jsfiddle.net/rhfhq33s/

Quelle

2016-04-04 the_

Sie wollen vertikal das Logo Zentrum mit den Menüpunkten oder mit der Navigationsleiste Höhe (oder beides)? –

@AndrewLyndem, Sorry für Unklarheiten, ich möchte alles vertikal in der Navbar zentriert mit zusätzlichen Polsterung auf der Oberseite der Navigationsleiste und unten –

Check Genes Antwort. –

Sie müssen direkt setzen line-height zu verankern:

@media (min-width: 768px) { 
    #menu-primary > li > a { line-height: 95px; } 
}

habe ich auch Medien Regel, weil ich denke, dass Sie das line-height nicht benötigen, wenn Menü zusammengeklappt ist.

https://jsfiddle.net/rhfhq33s/2/

Quelle

2016-04-04 18:19:27

danke, aber das wirkt sich leider auch auf meine Dropdown-Links aus? Ich habe versucht, nur # menu-primary li> a ', aber das funktioniert nicht? –

@the_ sollte dann '# menu-primary> li> a' sein –

Bootstrap vertikale Zentrierung in Navbar Ausgabe

Antwort

Verwandte Themen