Alinear texto verticalmente en CSS

1. Utilice la propiedad line-height para alinear el texto verticalmente en CSS
2. Utilice span dentro de un div junto con la propiedad line-height para alinear el texto verticalmente en CSS
3. Utilice flexbox para alinear texto verticalmente en CSS

Introduciremos tres métodos para alinear verticalmente un texto en CSS.

Utilice la propiedad line-height para alinear el texto verticalmente en CSS

Si tenemos texto de una sola línea, podemos usar la propiedad line-height para alinear el texto verticalmente dentro de un div. La propiedad CSS line-height establece la altura de un cuadro de línea. Se utiliza para establecer la distancia entre líneas de texto. Sin embargo, también podemos usarlo para alinear nuestro texto de una línea verticalmente. Esta técnica no funcionará si el texto tiene saltos de línea o tiene más de una línea. Podemos dar a line-height cualquier valor de acuerdo con nuestro requisito sobre dónde queremos alinear el texto verticalmente.

Por ejemplo, cree un div y escriba un texto de una línea dentro de él. Démosle al div un nombre de clase de center. Escriba un texto de una línea Vertically aligned dentro del div. Dale al div una height de 100px y un line-height de 100px para alinear verticalmente el texto con el centro del div. Por último, dale al div un border de 1px solid black para ver la alineación vertical.

El siguiente ejemplo muestra que el texto está alineado verticalmente al centro del div que contiene la height de 100 px y el borde de 1px solid black usando la propiedad de CSS line-height.

Código de ejemplo:

<div class="center"> Vertically aligned </div>

.center {
    height : 100px;
    line-height : 100px;
    border : 1px solid black;
}

Utilice span dentro de un div junto con la propiedad line-height para alinear el texto verticalmente en CSS

También podemos alinear varios números de líneas verticalmente usando la propiedad line-height. Podemos colocar una etiqueta span dentro de una etiqueta div y colocar varias líneas dentro de la etiqueta span. Podemos usar la etiqueta br para romper la línea y convertirla en un texto de varias líneas. Entonces podemos usar la propiedad line-height tanto para div como para span. También usaremos la propiedad CSS display: inline-block para la etiqueta span para envolver varias líneas de código juntas. Por lo tanto, también tenemos que usar la propiedad CSS line-height dentro de span para separar el texto de varias líneas entre sí.

Por ejemplo, cree un div y luego un span dentro del div. Escriba varias líneas de texto dentro de ese span con la ayuda de la etiqueta br. En CSS, seleccione el div y dé la height de 100px y establezca line-height en 100px. Establezca el borde div de 1px solid black para ver la alineación. Establezca la propiedad display de la etiqueta span en inline-block para envolver varias líneas de texto juntas. Asigne line-height a 20px al span para dar un espacio entre varias líneas de texto. Mantenga el vertical-align a middle para colocar verticalmente el texto exactamente en el medio.

El siguiente ejemplo muestra la alineación vertical de varias líneas de texto dentro de un div con la ayuda de la propiedad line-height y display: inline-block.

Código de ejemplo:

<div> 
    <span>
        Multiple <br> line <br> code
    </span>
</div>

div{
    height : 100px;
    line-height: 100px;
    border : 1px solid black
}
span {
    display : inline-block;
    vertical-align : middle;
    line-height : 20px;
}

Utilice flexbox para alinear texto verticalmente en CSS

También podemos usar flexbox para alinear un texto dentro de un div vertical u horizontalmente. Podemos usar flexbox estableciendo la propiedad display en flex. Después de establecer la propiedad display en flex, podemos usar la propiedad align-items y poner su valor como center para alinear un texto verticalmente dentro de un div. Podemos usar la propiedad justify-content y establecerla en center para centrar el texto dentro de un div horizontalmente. Las cajas flexibles son muy fáciles de usar y también muy efectivas.

Por ejemplo, cree un div y escriba una o varias líneas de texto dentro de él. Utilice la etiqueta br para crear varias líneas de texto. Dé una altura de 100px al div. Establezca el borde como 1px negro sólido para ver la alineación. Ponga el valor de la propiedad display como flex para usar flexbox. A continuación, establece la propiedad align-items como center para alinear el texto verticalmente dentro del div al centro. También podemos alinear el texto horizontalmente poniendo el valor de justify-content en center.

Así, podemos usar flexbox para alinear el texto horizontal y verticalmente en CSS.

Código de ejemplo:

<div>
    Align <br> Text to <br> Center
<div>

div {
    height : 100px;
    border : 1px solid black;
    display : flex;
    align-items : center;
    justify-content : center;
}