Alineamiento de una imagen con CSS
En un proyecto importante en el que estoy trabajando tenemos que añadir una serie de nuevas funcionalidades a una aplicación muy grande y eso supone también modificar la web que visitan cientos de miles de personas al día. Al ver que mis compañeros de HTML están más bien peladitos me ofrecí voluntario para hacerla ya que daban libertad dentro de unos limites.
Al apañar la web para las nuevas características me encuentro con que esta hecha con el diseñador de webforms de Visual Studio, y me encuentro con cosas como align=»absBottom» en una imagen para centrarla verticalmente.
Como aparte de las modificaciones que debía de hacer y como me sobraba tiempo y me aburría, convertí la web de formato indefinido a XHTML correcto con CSS, tenia que arreglar ese tipo de cosas, así que el alineamiento de la imagen se puede hacer con CSS con el estilo vertical-align que tomaría los siguientes valores
- top
- left
- right
- middle
- bottom
El código seria este:
<img src="..." align="absBottom">
El nuevo código sería:
<img src="..." class="middle" title="...." alt="...." />
Y la clase CSS seria:
.middle {
vertical-align: middle;
/* Valores: top, left, right, middle, bottom */
}
