Todo aquel que haya dedicado algo de tiempo a realizar páginas web, seguro que ha tenido que utilizar hojas de estilo CSS. De no ser así, puede ser poque se tenga una página web sin decoración alguna o porque se esté decorando la misma utilizando los obsoletos atributos de las etiquetas HTML destinadas a esa tarea (ya se sabe, los atributos color, width, etcétera). En este último caso, se está incurriendo en un error, ya que estos elementos están desaconsejados desde HTML 4, y existen alternativas para los mismos.

Con la llegada de dicho estándar y de las mencionadas hojas de estilo, otra de las cosas que se desaconsejan es la maquetación con tablas, siendo su alternativa la utilización de divs. Existen muchísimos enlaces al respecto, en los que se puede leer acerca de cómo maquetar con tablas, cómo evitar hacerlo, y las razones para ello. Mi resumen de las respuestas sería algo como:

• Que maquetar con tablas es realmente fácil, ya que por defecto cuentan con columnas, filas y celdas y permiten trabajar con ellas de manera muy flexible e intuitiva.
• Que para no maquetar con tablas se debe englobar cada conjunto de información en divs (seguramente, el mismo conjunto que antes englobaríamos en una celda de una tabla) y jugar con las posibilidades que ofrece CSS (sobretodo, las propiedades float y clear)
• Y que las razones para no maquetar con tablas son que las tablas sólo deben usarse para, precisamente, representar datos agrupados en forma tabular. En definitiva, la idea es usar cada tag HTML para dar información semántica y nunca estética, ya que de esto último se encargan las propiedades CSS.

Sin embargo, es difícil conseguir algunas de las cosas que con tablas son realmente fáciles, debido a que estas últimas tienen un comportamiento muy noble, mientras que algunas propiedades CSS, y en concreto una fundamental como es float, se comportan de manera realmente extraña en muchas ocasiones. Una de esas cosas es el centrado vertical de algún elemento que se encuentra dentro una columna maquetada con divs.

¿Qué pretendo?

Básicamente, lo que quiero conseguir es algo como esto:

Si examináis el código fuente de los ejemplos anteriores, veréis que están maquetados con tablas. Automáticamente, la información de la columna uno se centra verticálmente, aunque posteriormente podemos modificarla con la propiedad vertical-align de CSS. Por ejemplo, la primera tabla tiene este código fuente:

<table style="border: 1px solid green">
<tbody>
<tr>
<td style="border: 1px solid red">columna uno</td>
<td style="border: 1px solid blue">columna dos,
la cual es bastante
más alta que la anterior,
y además la podemos hacer
todavía más alta
y la columna 1 sigue centrada</td>
</tr>
</tbody></table>

El problema

Si esta misma maquetación la hacemos usando divs, obtendríamos el siguiente resultado:

cuyo código fuente es el siguiente:

<div class="contendor" style="border: 1px solid green; margin: 0; padding: 0">
<div class="columna1" style="border: 1px solid red; margin: 0pt; padding: 0pt; float: left; width: 10em; height: 100%; vertical-align: middle;">columna uno</div>
<div class="columna2" style="border: 1px solid blue; margin: 0; padding: 0; padding-left: 10em">columna dos,
la cual es bastante
más alta que la anterior,
y además la podemos hacer
todavía más alta
y la columna 1 ya no se centra</div>
</div>

Como podemos observar, el comportamiento de los div es bastante diferente al de las tablas por defecto. Por ejemplo, la anchura se adapta a la del contenedor en lugar de a la del contenido, y el alineado vertical se ajusta a la parte superior.

La idea es, sin embargo, que CSS permite modificar dicho comportamiento por defecto, pero en la práctica no podemos alterarlo tan fácilmente, ya que casi siempre estamos obligados a utilizar la propiedad float, que tiene algunas características curiosas, como por ejemplo hacer que el tamaño del div se ajuste al contenido (como en las tablas) y que puedas modificar la anchura con respecto al contenedor, pero no la altura.

Es decir, que podemos decir que el ancho sea de 10em (o podríamos decirle un 50% del div contenedor), pero que le digamos que la altura es de un 100% no le afecta. Las dos cosas se pueden observar en el ejemplo anterior.

Una posible solución

La única solución que he encontrado hasta ahora es hacer que los div se comporten como tablas. Esto es posible porque los creadores del estándar CSS incluyeron en la propiedad display una serie de valores para permitir maquetar divs usando la lógica de tablas. El resultado sería algo como lo siguiente:

Que, como podemos ver, permite el centrado vertical sin mayor problema. Su código fuente es el siguiente:
<div class="contendor" style="border: 1px solid green; margin: 0; padding: 0; display: table">
<div class="contendor-secundario" style="border: 1px solid yellow; margin: 0; padding: 0; display: table-row">
<div class="columna1" style="border: 1px solid red; margin: 0pt; padding: 0pt; vertical-align: middle; display: table-cell">columna uno</div>
<div class="columna2" style="border: 1px solid blue; margin: 0; padding: 0; display: table-cell">columna dos,
la cual es bastante
más alta que la anterior,
y además la podemos hacer
todavía más alta
y la columna 1 ya no se centra</div>
</div>
</div>

Podemos observar que necesitamos un div que haga de tabla (contenedor, con la propiedad display como table), uno que haga de una fila de la tabla (contenedor-secundario, con la propiedad display como table-row) y cada una de las celdas (columna1 y columna2, con la propiedad display como table-cell).

Si os fijáis, esto añade un div nuevo, el cual no tiene ningún propósito excepto el de ayudar a la maquetación, lo cual nunca es recomendable (se supone que el diseñador no debe tener necesidad de modificar el HTML si este está bien empaquetado en sus correspondientes divs etiquetados con identificadores y clases). Además, resulta irónico tener que simular el comportamiento de las tablas vía CSS para lograr lo mismo que anteriormente se lograba usando tablas directamente. Estas razones hacen que no me guste demasiado esta solución, no obstante es la única que de momento conozco.

Tener que recurrir a este tipo de soluciones me parece la prueba más evidente de que la maquetación usando CSS no está en absoluto depurada, conclusión a la que probablemente habrán llegado la mayoría de diseñadores web .

Caso particular: la columna a alinear es una imagen

En el caso de que queramos centrar verticalmente una columna cuyo único contenido es una imagen, podemos conseguirlo haciendo que esa imagen sea la imagen de fondo de la columna, ya que la propiedad background si que permite alinear verticalmente en todos los casos (parece que float, la más utilizada, es la única conflictiva ).

Esto sólo se debería usar en el caso de que la imagen sea méramente decorativa y no forme parte del contenido. Recordemos que idealmente, si eliminamos todas las hojas de estilo, la web no debería perder funcionalidad ni contenido, por lo que si la imagen aporta contenido, debería estar en el HTML. Un ejemplo de cómo hacer esto sería el siguiente:

Cuyo código fuente es el siguiente:

<div class="contendor" style="border: 1px solid green; margin: 0; padding: 0; background: url(http://blog.deigote.com/wp-content/themes/k2/styles/deigote/info.png) no-repeat scroll 0% 50%; padding-left: 60px">columna dos,
la cual es bastante
más alta que la anterior,
y además la podemos hacer
todavía más alta
y la columna 1 sigue centrada
</div>

Podemos ver que en este caso nos evitamos todos los div excepto el contenedor, quedando el código más limpio. Sin embargo, este caso es muy particular y no nos resuelve nada en la mayoría de ocasiones .