Centrando texto verticalmente II

1/ago/2014 2

Recuerdas las tablas? Sabes que aún son útiles? No como etiqueta HTML, sino la propiedad CSS display: table. Aquí presento una técnica sencilla y rápida que permite centrar verticalmente cualquier bloque de texto dado cierto elemento HTML con alto fijo.

Dado el siguiente HTML:

<div class="vertical-centered-text">
  <h2>Este texto será centrado verticalmente gracias a display: table; y display: table-cell;</h2>
</div>

El CSS que permite el centrado es el siguiente:

.vertical-centered-text {
  height: 200px;
  display: table;
}
  .vertical-centered-text > * {
    display: table-cell;
    vertical-align: middle;
  }

Comentarios

  1. Centrando texto verticalmente III: flexbox ↝ CSSLab [#]

    […] ahora esta propiedad permite la mejor manera de centrar verticalmente cualquier texto sin tener que agregar HTML […]

  2. Alegatica.T [#]

    […] ahora esta propiedad permite la mejor manera de centrar verticalmente cualquier texto sin tener que agregar HTML […]

Deja tu Comentario

Tu dirección de correo electrónico no será publicada. Los campos necesarios están marcados *

CSSLab