Jak wyśrodkować elementy nawigacyjne w pionie (Twitter Bootstrap)?

Question

To jest mój CSS/LESS kod CSS do tej pory:

//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; 
} 

która produkuje to:

FYI używam kod demo Twitter Bootstrap, nie zmieniły html (oprócz zmiany nazwy marki).

Jak widać, nazwa marki jest wyśrodkowana pionowo w pasku nawigacyjnym, tak jak powinna, ale linki nawigacyjne nie są (są nieco wyżej w górę). Problem stał się widoczny dopiero po zmianie wysokości paska nawigacyjnego. Jak mogę je wyśrodkować w pionie (np. Na przykład na stronie internetowej: this)?

Jeśli jest jakiejkolwiek pomocy, podkreślając elementy Chrome pokazuje to:

Answer 1

Klasa .brand używa innego line-height niż podstawowy tekst, który jest używany w Bootstrap, a także kilka innych kluczowych różnic.

Odnośne części z oryginalnego bootstrap pasku nawigacyjnym MNIEJ -

Dla .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; 
} 

Dla łącza na pasku nawigacyjnym:

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

będzie potrzebne, aby bawić się z wartości: @elementHeight, line-height, a może padding dla wybranego użytkownika: lub aby odzwierciedlać większy 60px @navbarHeight (te domyślne wartości są przeznaczone dla 40px @navbarHeight). Może wypróbujesz 40px @elementHeight i/lub 29-procentową wysokość linii, aby rozpocząć.

Answer 2

Można spróbować to:

display: table-cell;

Answer 3

Jeśli powyższe rozwiązanie nie pomaga, a nie dotykasz html, jedyne co mogę myśleć to css. Możesz spojrzeć na css, którego używał przykład bootstrap, i odpowiednio zmodyfikować rozmiary .navbar-inner i .navbar .brand.

Answer 4

Właśnie miałem podobny problem z Bootstrap 3, ale z elimentami marki. W końcu użyłem następujące CSS:

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

Moja bar nav wzrosła w rozmiarze odpowiednim do obrazu 50px, z górnego i dolnego marginesu na 10px. Nie jestem pewien, czy to pomoże.