Seguimos alineando verticalmente

Alinear cosas verticalmente siempre es complicado y es algo que se vuelve más engorroso cuando tenemos varios elementos que queremos colocar uno al lado del otro agregándoles la propiedad float pero, como tienen diferente altura se mostrarán alineados en su parte superior:

Curabitur sed mauris purus, pulvinar dictum metus.

Hola

Pulvinar dictum metus.

Es verdad que podemos usar la propiedad margin para mover cada cosa a su lugar pero eso es molesto ya que hay que adivinar y probar. Lo mismo puede hacerse con tablas aunque son cosas que muchos evitan como a la peste.

El CSS posee otra posibilidad que es usar tablas sin tablas ya que entre los nuevos valores aceptados para la propiedad display, hay dos en particular que nos facilitan las cosas: display:table y display:table-cell sobre las que algua vez he hablado pero, sobre las que vale la pena seguir insistiendo ya que su uso no está muy difundido.

Primero, voy a definir dos clases; una para el contenedor y otra para el contenido:

<style>
  .contenedor {
    display:table; /* esta es la propiedad clave */
    /* todas las demás propiedades son optativas */
  }
  .contenido {
    display:table-cell; /* esta es la propiedad clave */
    text-align:center; /* esto centra el contenido horizontalmente */
    vertical-align:middle; /* esto centra el contenido verticalmente */
    /* todas las demás propiedades son optativas */
  }
</style>

Y uso un esquema así:

<div class="contenedor">
  <div class="contenido">  ....... cualquier contenido ....... </div>
</div>

Coloco un elemento:

Curabitur sed mauris purus, pulvinar dictum metus.

Coloco dos:

<div class="contenedor">
  <div class="contenido">  ....... cualquier contenido ....... </div>
  <div class="contenido">  ....... cualquier contenido ....... </div>
</div>

Curabitur sed mauris purus, pulvinar dictum metus.

Pulvinar dictum metus.

Coloco tres:

<div class="contenedor">
  <div class="contenido">  ....... cualquier contenido ....... </div>
  <div class="contenido">  ....... cualquier contenido ....... </div>
  <div class="contenido">  ....... cualquier contenido ....... </div>
</div>

Curabitur sed mauris purus, pulvinar dictum metus.

Hola

Pulvinar dictum metus.

Y todo se irá alineando sólo, sin necesidad de saber previamente cuales son los tamaños. Mejor aún, esto es algo que funcionará en cualquier navegador, incluyendo IE8.