Texto de alineación vertical CSS dentro de li

Estoy mostrando un número de cuadros en una fila con altura y ancho fijos, generados a partir de etiquetas <li>. ahora necesito alinear el texto en el centro vertical. La alineación vertical de CSS no tiene impacto, ¿tal vez me falta algo?

No estoy buscando trucos de uso (margen, relleno, altura de línea), estos no funcionarán porque algunos textos son largos y se dividirán en dos líneas.

Encuentre el código real:

Código CSS

ul.catBlock{
  width:960px; 
  height: 270px; 
  border:1px solid #ccc; 
}

ul.catBlock li{
  list-style: none; 
  float:left; 
  display:block; 
  text-align: center; 
  width:160px; 
  height: 100px;
}

ul.catBlock li a{ 
  display: block;  
  padding: 30px 10px 5px 10px; 
  height:60px;
}

Código HTML

<ul class="catBlock">
 <li><a href="#">IP Phone</a></li>
 <li><a href="#">Dual SIM Switch Server</a></li>
 <li><a href="#">IP PBX</a></li>
</ul>

Defina el padre con display: tabley el elemento mismo con vertical-align: middley display: table-cell.

line-heightes cómo alinea verticalmente el texto. Es bastante estándar y no lo considero un "truco". Solo agregue line-height: 100pxa su ul.catBlock liy estará bien.

En este caso, es posible que deba agregarlo, ul.catBlock li aya que todo el texto dentro de litambién está dentro de un a. He visto que suceden algunas cosas raras cuando haces esto, así que prueba ambos y mira cuál funciona.

Sin importar cuán tarde sea esta respuesta, cualquiera que se encuentre con esto puede querer probar

li {
    display: flex;
    flex-direction: row;
    align-items: center;
}

La compatibilidad del navegador con flexbox es mucho mejor de lo que era cuando @scottjoudry publicó su respuesta anterior, pero es posible que desee considerar el uso de prefijos u otras opciones si está tratando de admitir navegadores mucho más antiguos. caniuse: flexión

Sorprendentemente (o no), la vertical-alignherramienta funciona mejor para este trabajo. Lo mejor de todo es que no se requiere Javascript.

En el siguiente ejemplo, coloco la outerclase en el medio del cuerpo y la innerclase en el medio de la outerclase.

Vista previa: http://jsfiddle.net/tLkSV/513/

HTML:

<div id="container">
    <span></span><div class="outer">
        <span></span><div class="inner">

        </div>
    </div>
</div>

CSS:

html, body {
    height: 100%;
    margin: 0;
    padding: 0; }
#container {
    text-align: center;
    height: 100%; }
span { 
    height: 100%;
    vertical-align: middle;
    display: inline-block; }
.outer {
    width: 100px;
    height: 200px;
    padding: 0;
    border: 1px solid #000;
    vertical-align: middle;
    display: inline-block; }
.inner {
    background: red;
    width: 30px;
    height: 20px;    
    vertical-align: middle;
    display: inline-block; }

La alineación vertical funciona alineando los centros de los elementos que están uno al lado del otro. La aplicación de alineación vertical a un solo elemento no hace absolutamente nada. Si agrega un segundo elemento que no tiene ancho pero es la altura del contenedor, su único elemento se moverá al centro verticalmente con este elemento sin ancho, lo que lo centrará verticalmente. Los únicos requisitos son que establezca ambos elementos en línea (o bloque en línea) y establezca su atributo de alineación vertical en vertical-align: middle.

Nota: Puede notar en mi código a continuación que mi <span>etiqueta y mi <div>etiqueta se tocan. Debido a que ambos son elementos en línea, un espacio en realidad agregará un espacio entre el elemento sin ancho y su div, así que asegúrese de omitirlo.

En el futuro, este problema será resuelto por flexbox. En este momento, el soporte del navegador es pésimo, pero es compatible de una forma u otra en todos los navegadores actuales.

Soporte del navegador: http://caniuse.com/flexbox

.vertically_aligned {

    /* older webkit */
    display: -webkit-box;
    -webkit-box-align: center;
    -webkit-justify-content: center;

    /* older firefox */
    display: -moz-box;
    -moz-box-align: center;
    -moz-box-pack: center;

    /* IE10*/
    display: -ms-flexbox;
    -ms-flex-align: center;
    -ms-flex-pack: center;

    /* newer webkit */
    display: -webkit-flex;
    -webkit-align-items: center;
    -webkit-box-pack: center;

    /* Standard Form - IE 11+, FF 22+, Chrome 29+, Opera 17+ */
    display: flex;
    align-items: center;
    justify-content: center;
}

Antecedentes de Flexbox: http://css-tricks.com/snippets/css/a-guide-to-flexbox/

No se proporcionan respuestas perfectas aquí, excepto la respuesta de Asaf, que no proporciona ningún código ni ejemplo, por lo que me gustaría contribuir con la mía ...

Para que vertical-align: middle;funcione, debe usar display: table;para su ulelemento y display: table-cell;para lielementos y lo que puede usar vertical-align: middle;para lielementos.

No es necesario proporcionar ninguna explícita margins, paddingspara que su texto verticalmente medio.

Manifestación

ul.catBlock{
    display: table;
    width:960px; 
    height: 270px; 
    border:1px solid #ccc; 
}

ul.catBlock li {
    list-style: none;
    display: table-cell; 
    text-align: center; 
    width:160px; 
    vertical-align: middle;
}

ul.catBlock li a { 
    display: block;
}

Como se explica aquí: https://css-tricks.com/centering-in-the-unknown/ .

Como se probó en la práctica real, la solución más confiable pero elegante es insertar un elemento en línea de asistencia en el <li />elemento como el primer hijo, cuya altura debe establecerse en el 100% (de la altura de su padre, el <li />), y su altura en el vertical-alignmedio. . Para lograr esto, puede poner a <span />, pero la forma más conveniente es usar li:afterpseudo class.

Captura de pantalla:

ul.menu-horizontal {
    list-style-type: none;
    margin: 0;
    padding: 0;
    display: inline-block;
    vertical-align: middle;
}

ul.menu-horizontal:after {
    content: '';
    clear: both;
    float: none;
    display: block;
}

ul.menu-horizontal li {
    padding: 5px 10px;
    box-sizing: border-box;
    height: 100%;
    cursor: pointer;
    display: inline-block;
    vertical-align: middle;
    float: left;
}

/* The magic happens here! */
ul.menu-horizontal li:before {
    content: '';
    display: inline;
    height: 100%;
    vertical-align: middle;
}

Prueba esta solución

Funciona mejor en la mayoría de los casos

es posible que tenga que usar div en lugar de li para eso

.DivParent {
    height: 100px;
    border: 1px solid lime;
    white-space: nowrap;
}
.verticallyAlignedDiv {
    display: inline-block;
    vertical-align: middle;
    white-space: normal;
}
.DivHelper {
    display: inline-block;
    vertical-align: middle;
    height:100%;
}

<div class="DivParent">
    <div class="verticallyAlignedDiv">
        <p>Isnt it good!</p>
     
    </div><div class="DivHelper"></div>
</div>

Solución simple para alineación vertical en el medio ... para mí funciona como un encanto

ul{display:table; text-align:center; margin:0 auto;}
li{display:inline-block; text-align:center;}
li.items_inside_li{display:inline-block; vertical-align:middle;}