Cómo Vertical Medio Alinear texto en un div

Aprende a media vertical de alinear el texto dentro de un elemento DIV. Esto se puede conseguir con propiedades CSS altura y la línea de altura. Es fácil y sencillo!

A+ A-

"¿Por qué estos chicos han hecho CSS la alineación vertical del texto dentro de un DIV tan difícil? Es posible alinear el texto dentro de un medio elemento DIV? ", Este es el urogallo de un número de diseñadores de páginas web.

En el tiempo todos nos preguntamos ¿por medio de la alineación de texto en un div es una tarea tan poco intuitivo en web-development.It es perfectamente fácil alinear horizontalmente texto con la ayuda de la propiedad text-align.

Pero alineación vertical también es una característica igualmente importante y, a menudo es necesario. estándares CSS, sin embargo, siempre se han mantenido bastante en esto.

Bueno, de todos modos, hoy voy a mostrar una solución simple. Puede que no sea útil en todos los casos, pero sí puede venir bien a veces.

Para alinear el texto verticalmente media en un elemento DIV, tenemos que utilizar la propiedad CSS altura del elemento DIV y CSS line-height propiedad del texto que necesita ser alineado. Si nos fijamos tanto estas propiedades de igual valor el texto aparecerá verticalmente alineados media dentro del elemento DIV.

Veamos un ejemplo:

Estoy texto alineado verticalmente medio!

Aquí está el código CSS que se debe utilizar:

#myDiv {
altura: 70px;
fondo: #BBDBFB;
padding-left: 10px;
margen: 10px auto;
frontera: 1px solid # 000;
}

#mi texto{
line-height: 70px;
}

<div id = "myDiv"> <span id = "myText"> Soy verticalmente alineados medio! </ span> </ div>

Como he mencionado antes, mantener tanto las propiedades resaltados a mismo valor (70 píxeles en el ejemplo anterior)

Por defecto, la pieza de texto dentro de un DIV align permanece verticalmente media con respecto a su línea de altura. Por lo tanto, tan pronto como aumentamos la línea de altura para que sea igual a la altura de contener elemento -el texto comienza a aparecer align medio con respecto al elemento que contiene también.

Fácil y lógico! Esperamos que este consejo será de utilidad para usted. También es posible que desee ver cómo se puede organizar dos o más elementos div al lado del otro. Manténgase conectado con TechWelkin para este tipo de consejos útiles de la tecnología!

Ads

Compartir