html - justificar - Texto de alineación vertical de CSS dentro de li

colores html

Question

Estoy mostrando el número de cuadros en una fila con alto y ancho de corrección, generados a partir de etiquetas <li>. ahora necesito alinear el texto en el centro vertical. El CSS vertical-align no tiene impacto, tal vez me falta algo ???

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

Por favor encuentre el código actual:

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>

Answer 1

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

Tal como se probó en la práctica real, la solución más confiable pero elegante es insertar un elemento en línea asistente en el elemento <li /> como primer hijo, cuya altura debe establecerse en 100% (de la altura de sus padres, el <li /> ), y su vertical-align establece en el centro. Para lograr esto, puede poner un <span /> , pero la forma más conveniente es usar li:after pseudo 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;
}

Answer 2

Defina el elemento primario con display: table y el elemento en sí con vertical-align: middle y display: table-cell .

Answer 3

En el futuro, este problema será resuelto por flexbox. En este momento, el soporte del navegador es sombrío, 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 en Flexbox: http://css-tricks.com/snippets/css/a-guide-to-flexbox/

Answer 4

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

Inorder para hacer vertical-align: middle; trabajo, necesitas usar display: table; para su elemento ul y display: table-cell; para elementos li y que puede usar vertical-align: middle; para li elementos.

No es necesario que proporciones ningún margins explícito, paddings para hacer que tu texto sea verticalmente medio.

Demo

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

Answer 5

Prueba esta solución

Funciona mejor en la mayoría de los casos

puede 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>

Answer 6

Sin embargo, muchos años tarde esta respuesta puede ser, cualquiera que se encuentre con esto podría querer probar

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

El soporte de navegador para flexbox es mucho mejor de lo que era cuando @scottjoudry publicó su respuesta anterior, pero es posible que desee considerar el prefijo u otras opciones si está intentando admitir navegadores mucho más antiguos. caniuse: flex

Answer 7

Solución simple para el alineamiento vertical 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;}

Answer 8

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

En el siguiente ejemplo, coloco la clase outer en el medio del cuerpo y la clase inner en el medio de la clase outer .

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 vertical-alinear 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á verticalmente al centro con este elemento sin ancho, centrándolo verticalmente. Los únicos requisitos son que establezca ambos elementos en línea (o en bloque en línea) y establezca su atributo de alineación vertical-align: middle en vertical-align: middle .

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

Answer 9

line-height es cómo alinea verticalmente el texto. Es bastante estándar y no lo considero un "truco". Simplemente agregue line-height: 100px a su ul.catBlock li y estará bien.

En este caso, puede que tenga que agregarlo a ul.catBlock li a ya que todo el texto dentro del li también está dentro de un a . He visto que suceden cosas raras cuando haces esto, así que prueba con ambos y ver cuál funciona.