Centrar texto verticalmente en CSS

1. Utilice la propiedad line-height para centrar el texto verticalmente en CSS
2. Utilice las propiedades display, vertical-align y line-height para centrar el texto verticalmente en CSS
3. Simule la visualización de la tabla para centrar verticalmente el texto en CSS

Este artículo presentará métodos para centrar los textos verticalmente en CSS.

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

Podemos establecer la altura de la propiedad line-height como div para centrar el texto verticalmente en CSS. La propiedad line-height especifica la altura de una línea. Puede ilustrarse creando un borde del elemento div. También podemos usar la propiedad text-align y establecerla en center para alinear el texto con el centro horizontalmente.

Por ejemplo, cree un div en HTML y escriba el texto Hello World!. entre. A continuación, en CSS, establezca la altura del div en 200px. Además, establezca la line-height en el mismo valor. Alinee el texto al centro con la propiedad text-align. Cree un borde solid de ancho 3px en color black utilizando la propiedad border.

En el siguiente ejemplo, hemos establecido los mismos píxeles de line-height y height del div. Por lo tanto, centra el texto verticalmente. Sin embargo, este método solo funciona para textos de una sola línea.

Código de ejemplo:

<div>
    Hello World!
</div>

div {
    height: 200px;
    line-height: 200px;
    text-align: center;
    border: 3px solid black;
}

Utilice las propiedades display, vertical-align y line-height para centrar el texto verticalmente en CSS

Podemos centrar el texto en varias líneas usando las diferentes propiedades CSS como display, vertical-align y line-height. La propiedad display establece el comportamiento de visualización de un elemento. La propiedad vertical-align es responsable de la alineación vertical del elemento. Podemos establecer display en inline-block y vertical-align en middle para lograr la alineación vertical de varias líneas de texto.

Por ejemplo, cree un div en HTML y escriba span dentro de él. Escriba el texto Hello y rompa la línea con <br> y luego escriba World! dentro del span. A continuación, en CSS, asigne la line-height y la height al mismo valor de 200px seleccionando el div. Dale un borde al div y alinea el texto en el centro como hicimos en el primer método. Luego, seleccione el span y establezca la propiedad display a inline-block. Luego, dé el valor de middle a la propiedad vertical-align. Por último, establece el valor de line-height a normal.

En el siguiente ejemplo, cambiamos la propiedad line-height a normal en span para que las múltiples líneas de texto tengan la line-height normal. El valor de inline-block comenzará la siguiente línea del texto justo debajo de la línea de arriba. El valor middle de la propiedad alineación vertical colocará el texto en el medio del eje vertical.

Código de ejemplo:

<div>
    <span>Hello <br> World! </span>
</div>

div {
    height: 200px;
    line-height: 200px;
    text-align: center;
    border: 3px solid black;
}
span {
    display:inline-block;
    vertical-align: middle;
    line-height: normal;
}

Simule la visualización de la tabla para centrar verticalmente el texto en CSS

Podemos simular el texto como una celda de tabla para centrarlo verticalmente en CSS. Usamos la propiedad display para simular una tabla. También usaremos la propiedad vertical-align para centrar el texto verticalmente. Trabajaremos en el fragmento HTML del segundo método y le aplicaremos CSS nuevo.

En primer lugar, seleccione div y establezca la altura, el ancho y el borde. Utilice la propiedad display y establezca el valor en table. Hará que el div actúe como una mesa. Luego, seleccione el span y establezca la propiedad display en table-cell y la propiedad vertical-align en middle. Establecer el elemento span como table-cell hará que el elemento sea como una celda de tabla. De esta forma, podemos crear un texto centrado verticalmente.

Código de ejemplo:

<div>
    <span>Hello <br> World!</span>
</div>

div {
    display: table;
    height: 200px;
    width: 100%;
    text-align: center;
    border: 3px solid black;
}
span {
    display: table-cell;
    vertical-align: middle;
}