El alineamiento de una imagen con el HTML

Ya se puso ver en su período el atributo align que os dejaría alinear el texto a derecha, izquierda o centro de vuestra página. Se comentó que ese atributo no era especial de la etiqueta <p> sino que pudiese ser hallado en otro tipo de etiquetas.

Pues ahora, <img> tiende a ser una de esas etiquetas que admiten este atributo sin embargo, en este caso el trabajo resulta ser distinto.

Para colocar una imagen horizontalmente se puede lograr del mismo modo que el texto, o sea, manejando el atributo align dentro de una etiqueta <p> o <div>. En este sentido, lo que se añadirá dentro de esa etiqueta será la imagen en vez del texto:

En el siguiente código se enseñará la imagen en el centro:

<div align=”center”><img src=”logo.gif”></div>

El resultado es:

No obstante, ya se ha mencionado que la etiqueta <img> puede admitir el atributo align. De esta manera, el beneficio que se le dé atrasa la anterior.

La realidad de manejar el atributo align dentro de la etiqueta <img> os da la posibilidad de, en el caso de dar los valores left o right, justificar la imagen del lado que deseen al mismo tiempo que se rellena con texto el lado opuesto. De esta manera se empapa vuestras imágenes dentro del texto de una forma fácil.

En el siguiente ejemplo podéis observar el tipo de código a elaborar para conseguir dicho efecto:

El resultado es:
Texto tan extenso como queramos que cubrirá la parte izquierda de la imagen. Sigo poniendo texto para que se vea el efecto

<p> 
<img src=”imagen.gif” align=”right”>Texto tan extenso como quieran que cubrirá la parte izquierda de la imagen. Sigo colocando texto para que se vea el efecto
</p>

Quedaría así:
Texto tan extenso como quieran que cubrirá la parte izquierda de la imagen. Sigo colocando texto para que se vea el efecto

Si en alguna oportunidad quieren dejar el rellenar ese espacio lateral, se puede pasar a una zona libre metiendo un salto de línea <br> dentro del cual se añadirá un atributo: clear

Así, etiquetas del tipo:

<br clear=”left”> 
Saltara verticalmente hasta hallar el lateral izquierdo libre. 
<br clear=”right”> 
Saltara verticalmente hasta hallar el lateral derecho libre. 
<br clear=”all”>
Saltará verticalmente hasta hallar ambos laterales libres.

Ejemplo de clear:
Texto tan extenso como deseen que cubrirá la parte izquierda.
Esto está debajo de la imagen.

Hay otro tipo de valores que logra patrocinar el atributo align dentro de la etiqueta <img>. Estos son concernientes a la alineación vertical de la imagen.
Imaginen que se redacte una línea al lado de vuestra imagen. Esta línea puede permanecer por ejemplo arriba, abajo o al medio de la imagen. De igual forma, puede que en una misma línea se tengan diferentes imágenes de alturas variadas que pueden ser alineadas de distintas maneras.
Los valores adicionales del atributo align son:

  • top
    Conviene la imagen a la parte más alta de la línea. A esto refiere qué, si hay una imagen más alta, las dos mostraran el borde superior a la misma altura.
  • bottom
    Concuerda el bajo de la imagen al texto.
  • Absbottom
    Situará el borde inferior de la imagen a nivel del elemento más bajo de la línea.
  • middle
    Hace armonizar la base de la línea de texto con el medio vertical de la imagen.
  • absmiddle
    Pacta la imagen al medio absoluto de la línea. Si bien el ejemplo puede ser un poco complejo, pueden ser más sencillamente asimiladas a partir con un poco de práctica.