Conocimientos Web .es

Os traigo un hack en CSS (aunque en teoría no deban usarse) para alinear verticalmente utilizando una imagen para ello

Como en CSS las imagenes tienen un atributo vertical-align:middle; este atributo sirve para que el texto que escribamos a continuación de la imagen se alinee en su parte central.

Ahora definiremos este estilo para la imagen

<style type=”text/css”>
img.valign {
height: 100%;
vertical-align: middle;
width: 0px;
}
</style>

El atributo width: 0px lo utilizaremos para que la imagen no tenga anchura, así la imagen no será visible, ya que lo que pretendemos es servirnos de ella para colocar correctamente alineado el contenido verticalmente.

Ahora creamos una capa con contenido alineado en la vertical:

<div style=’height:400px; background-color: #ccccff;’>
Alineado en la vertical. <img class=”valign” />
</div>

Definir el color de fondo no es necesario, pero lo colocamos para poder definir donde se encuentra la capa. Así como el enlace a imagen SRC no existe, ya que en realidad no mostraremos ninguna imagen como ya os habia comentado.

Este hack funcionará perfectamente tanto en Internet Explorer, como en Firefox y Opera, lo que soluciona muchos problemas que podrían aparecer utilizando alguna otra técnica para este tipo de alineación.

Pero como no todo es perfecto, esto solo funcionará para la primera línea, es decir que si quereis colocar mas de una linea de texto este truco no os funcionará como deseabais.

Comparte este artículo