Alinear texto verticalmente en Navbar

Question

Estoy tratando de usar <span> para mover texto en mi barra de navegación. Mi barra de navegación es <ul> y los elementos son todos <li> s pero el texto está alineado con la parte superior de la barra de navegación y quiero que se centre verticalmente. Como puede ver en JSFiddle, estoy usando una propiedad a: hover en CSS para cambiar el fondo y el color del texto cuando está sobrevolado. Cuando aplico el tramo solo al texto, toda la sección flotante se mueve también. Ve si puedes entender lo que quiero decir.

Mi jsFiddle está aquí:

http://jsfiddle.net/G8CJ7/

Básicamente sólo quiero el texto alineado verticalmente de una manera sencilla y concisa. Originalmente estaba usando etiquetas '' y estableciendo un margen en ellas, pero quiero evitar el uso de etiquetas de encabezado para este propósito para mejorar el SEO. Gracias.

Answer 1

La actualización de esta un par de años más tarde, pero siempre existe la opción de usar:

display:table; 
display:table-row; 
display:table-cell; 

con vertical-align: media; para centrar los elementos. Prefiero este enfoque en estos días porque puede aplicar reglas receptivas al estilo de visualización (por ejemplo, cambiarlo para mostrar: bloquear y visualizar: bloque en línea, etc., si necesita actualizarlo para otros tamaños de pantalla. Aquí hay un violín:

http://jsfiddle.net/G8CJ7/68/

Answer 2

http://jsfiddle.net/G8CJ7/1/

Agregado line-height: 40px para centrar el texto verticalmente. IE7 tendrá problemas con esto ya que no es totalmente compatible, por lo que una hoja de estilo condicional con un relleno en el li lo resolverá.

Answer 3

Adición funciona altura de la línea, se puede también añadir el relleno de la parte superior:

.class { padding-top: 10px; } 

Ajuste el relleno para el centro.