¿Cómo centrar verticalmente los elementos de la barra de navegación (Twitter Bootstrap)?

Question

Esta es mi CSS menos código/CSS hasta el momento:

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

que produce esto:

FYI estoy usando el código de demostración Twitter Bootstrap, no he alterado el html (además de cambiar el nombre de la marca).

Como puede ver, la marca se centra verticalmente dentro de la barra de navegación como debería ser, pero los enlaces de navegación no lo son (son un poco más altos hacia la parte superior). El problema solo se hizo evidente una vez que modifiqué la altura de la barra de navegación. ¿Cómo puedo hacer que se centren verticalmente (como el sitio web this, por ejemplo)?

Si te sirve de ayuda, destacando los elementos en Chrome muestra esto:

Answer 1

La clase .brand utiliza un line-height diferente al texto base que se usa en Bootstrap, así como algunas otras diferencias clave.

partes relevantes de la barra de navegación de arranque original menos -

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

Para los enlaces en la barra de navegación:

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

Es probable que tenga que jugar con el valores de @elementHeight, line-height, y tal vez padding para el .navbar .nav > li > a seleccione o para reflejar el mayor 60px @navbarHeight (estos valores predeterminados están destinados a 40px @navbarHeight). Tal vez intente con un 40px @elementHeight y/o una altura de línea de 29px para comenzar.

Answer 2

Puede probar esto:

display: table-cell;

Answer 3

Si la respuesta anterior no ayuda, y no has tocado el html, lo único que se me ocurre es el CSS. Es posible que desee ver el css que utilizó el ejemplo de arranque y modificar los tamaños de .navbar-inner y .navbar .brand en consecuencia.

Answer 4

Acabo de tener un problema similar con Bootstrap 3 pero con la eliminación de la marca. Al final he usado el siguiente CSS:

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

Mi barra de navegación ha aumentado de tamaño debido a una imagen de 50px, con márgenes superior e inferior de 10px. No estoy seguro si eso es de alguna ayuda.