¿Cómo puedo usar CSS para centrar verticalmente el texto en un delimitador, dentro de un LI?

Question

Las variaciones en esta pregunta se han hecho muchas veces. El centrado vertical con CSS es un desafío.

que tienen un escenario particular, se trata de una lista que se muestra horizontalmente. El marcado es así:

<ul id='ul1' class='c'> 
    <li><a href='javascript:void(0)'>Fribble Fromme</a></li> 
    <li><a href='javascript:void(0)'>Fobble</a></li> 
    <li><a href='javascript:void(0)'>Foo Fickle Pickle</a></li> 
    </ul> 

El estilo es como esto:

ul.c { 
    height:52px; 
    text-align:center; 
    } 
    ul li a { 
    float:left; 
    text-decoration:none; 
    border: 1px solid Maroon; 
    padding:2px 12px; 
    background:#FFEF8A; 
    line-height:1em; 
    width:100px; 
    } 
    ul li a:hover { 
    background: #CCC; 
    } 
    ul li { 
    height:52px; 
    display:inline-block; 
    } 

La lista resultante es el siguiente:

pero quiero todos los requisitos para ser la misma altura, y quiero que el texto se centre verticalmente en cada cuadro. Puedo establecer la altura del cuadro agregando un estilo height para los elementos A. El resultado es el siguiente:

... que está cerca de lo que yo quiero, sino el centrado vertical no está sucediendo.

Puedo configurar line-height para el texto, as suggested in this post, para hacer el centrado vertical. Incluso puedo elegir diferentes valores de line-height para diferentes elementos A, si sé cuál de los elementos recibirá varias líneas de texto. Pero no sé cuáles requerirán líneas múltiples.

¿Cómo puedo conseguir que el centro cuando algunos de los elementos A tienen texto que se ajusta?

Answer 1

Usted podría utilizar display:table, etc, junto con vertical-align:middle

ul.c { 
    text-align:center; 
    display:table; 
} 

ul li { 
    float:left;  
} 

ul li a { 
    text-decoration:none; 
    border: 1px solid Maroon; 
    padding:2px 12px; 
    background:#FFEF8A; 
    width:100px; 
    height:52px; 
    display:table-cell; 
    vertical-align:middle; 
} 

ul li a:hover { 
    background: #CCC; 
} 

Ejemplo:http://jsfiddle.net/kf52n/2/

Answer 2

yo no podía entender una manera de hacer esto en el CSS. He descubierto que que podía hacer lo que necesitaba con Javascript, estableciendo el padding-top y padding-bottom a los valores adecuados en tiempo de ejecución. La técnica es medir la altura "natural" del elemento A, luego establecer el relleno para que el elemento A se centre verticalmente.

Este es el código JS necesario:

function setHeightIntelligently(ulElement) { 
    var items, L1, i, anchor, availableHeight = ulElement.clientHeight, 
     naturalHeight, pad; 
    items = ulElement.children; 
    for(i=0, L1 = items.length;i<L1;i++){ 
     if (items[i].tagName.toUpperCase() == 'LI') { 
     anchor = items[i].children[0]; 
     naturalHeight = anchor.clientHeight; 
     pad = (availableHeight - naturalHeight)/2; 
     anchor.style.paddingTop= pad+'px'; 
     anchor.style.paddingBottom= pad+'px'; 
     } 
    } 
    } 

    function init() { 
    var element = document.getElementById('ul1'); 
    setHeightIntelligently(element); 
    } 

En el CSS, no hay que establecer explícitamente altura o el relleno de los elementos A. Hacer eso causaría que la altura "natural" no sea lo que necesitamos que sea.

El resultado es la siguiente:

Para verlo en acción, go here.

Answer 3

en el css que ha configurado la altura y la línea de altura de la misma. Entonces obtendrás una caja rectangular.

Pero aún así usted está viendo el espacio en la parte inferior de la razón se debe a que el relleno

agregando dos valores en el acolchado añade relleno superior e inferior

padding: abajo arriba;

ya que tiene 2 y 12 espacios grandes.

probar esto

height: 52px; 
line-height:52px; 
padding: 6px 6px; // here you have to tweak and see the output 
vertical-align:center; 

que me haga saber que está trabajando

Answer 4

vieja pregunta, pero la respuesta ahora puede ser actualizado con Flexbox.

a { 
    height: 60px; 
    display: flex; 
    align-items: center; 
    justify-content: center; 
}