Alineación de imágenes con HTML

Explica la manera de alinear la imagen dentro de la página: centrarla, colocarla a la derecha, a la izquierda, etc.
Vimos en su momento el atributo align que nos permitía alinear el texto a derecha, izquierda o centro de nuestra página. Dijimos que este atributo no era exclusivo de la etiqueta <p> sino que podía ser encontrado en otro tipo de etiquetas.

Pues bien, <img> resulta ser una de esas etiquetas que aceptan este atributo aunque en este caso el funcionamiento resulta ser diferente.

Para alinear una imagen horizontalmente podemos hacerlo de la misma forma que el texto, es decir, utilizando el atributo align dentro de una etiqueta <p> o <div>. En este caso, lo que incluiremos dentro de esa etiqueta será la imagen en lugar del texto:

Este código mostrará la imagen en el centro:

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

Quedaría así:

Sin embargo, ya hemos dicho que la etiqueta <img> puede aceptar el atributo align. En este caso, la utilidad que le damos difiere de la anterior.

El hecho de utilizar el atributo align dentro de la etiqueta <img> nos permite, en el caso de darle los valores left o right, justificar la imagen del lado que deseamos a la vez que rellenamos con texto el lado opuesto. De esta forma embebemos nuestras imágenes dentro del texto de una manera sencilla.

Aquí podéis ver el tipo de código a crear para obtener dicho efecto:

<p>
<img src="imagen.gif" align="right">Texto tan extenso como queramos que cubrirá la parte izquierda de la imagen. Sigo poniendo texto para que se vea el efecto, Bla bla bla bla bla bla bla...
</p>

Quedaría así:
Texto tan extenso como queramos que cubrirá la parte izquierda de la imagen. Sigo poniendo texto para que se vea el efecto, Bla bla bla bla bla bla bla...

<p>
<img src="imagen.gif" align="left">Texto tan extenso como queramos que cubrirá la parte derecha de la imagen. Sigo poniendo texto para que se vea el efecto, Bla bla bla bla bla bla bla...
</p>

Quedaría así:
Texto tan extenso como queramos que cubrirá la parte izquierda de la imagen. Sigo poniendo texto para que se vea el efecto, Bla bla bla bla bla bla bla...

Si en algún momento deseásemos dejar de rellenar ese espacio lateral, podemos pasar a una zona libre introduciendo un salto de línea <br> dentro del cual añadiremos un atributo: clear

Así, etiquetas del tipo:

<br clear="left">
Saltara verticalmente hasta encontrar el lateral izquierdo libre.
<br clear="right">
Saltara verticalmente hasta encontrar el lateral derecho libre.
<br clear="all">

Saltará verticalmente hasta encontrar ambos laterales libres.

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

Existen otro tipo de valores que puede adoptar el atributo align dentro de la etiqueta <img>. Estos son relativos a la alineación vertical de la imagen.
Supongamos que escribimos una línea al lado de nuestra imagen. Esta línea puede quedar por ejemplo arriba, abajo o al medio de la imagen. Asimismo, puede que en una misma línea tengamos varias imágenes de alturas diferentes que pueden ser alineadas de distintas formás.
Estos valores adicionales del atributo align son:

top
Ajusta la imagen a la parte más alta de la línea. Esto quiere decir que, si hay una imagen más alta, ambas imágenes presentaran el borde superior a la misma altura.

bottom
Ajusta el bajo de la imagen al texto.

Absbottom
Colocara el borde inferior de la imagen a nivel del elemento más bajo de la línea.

middle
Hace coincidir la base de la línea de texto con el medio vertical de la imagen.

absmiddle
Ajusta la imagen al medio absoluto de la línea.

Estas explicaciones, que pueden resultar un poco complicadas, pueden ser más fácilmente asimiladas a partir con un poco de practica.

Nos queda explicar como introducir debajo de la imagen un pie de foto o explicación. Para ello tendremos que ver antes de nada las tablas, en el próximos capítulos...

Autor

Rubén Alvarez

Redactor de DesarrolloWeb.com

Compartir

Comentarios

krlos reyna

05/3/2009
jajaj muy fino el post

no mas puse esto en google
"poner una imagen y al lado texto en html"


jajajaja y aparecio lol

XD

Daniel

08/3/2009
Oye, qué buena onda! También sirrve para alinear videos o banners. Gracias.

Ladislao

04/4/2009
Gracias, sos un grande

Miguel Ruiz

29/5/2009
Hay algo que no entiendo
En el ejemplo
<p>
<img src="imagen.gif" align="left">Texto tan extenso como queramos que cubrirá la parte derecha de la imagen. Sigo poniendo texto para que se vea el efecto, Bla bla bla bla bla bla bla...
</p>
La imagen aparece apretada contra el texto. Eso no le da buena presencia. ¿Cómo escribo el código para aplicarle un padding de modo que el texto luzca mejor tanto arriba como abajo?
Muy agradecido por su web site. ¡Es excelente!
Miguel Ruiz

CLAUS

07/8/2009
GRACIAS!!!
ME SIRVIO DE MUCHO TU AYUDA 1000 GRACIAS!!!

Sara

07/12/2009
No valida
Muy bien la información pero desfasada, estos códigos no validan en la W3C... deberían actualizar contenidos.

Claudia

01/4/2010
super util
me fue superrrr util!!
gracias por la información

Hector

18/6/2010
gracias
gracias me sirvio de mucho la explicacion

alex

11/9/2010
faltan los gif
En esta página, no se ven tampoco las imágenes así que el ejemplo ya no ilustra el código.
Los dos ejemplos quedan iguales.

amauris gomez hernandez

16/10/2010
hola
hola visiten mi blog gracias www.amaurisblog.blogspot.com

Alejandro

19/10/2010
No me saca la imagen
Estoy alucinando, he puesto esto en mi html de prueba...

<p><img scr="avatar.gif" align="left">Este es el creador de la web, aficionadillo aun, pero algun dia esto sera grande, sino esperar y lo vereis, muahahahaha.</p>

La imagen no sale y esta en el mismo directorio, lo estoy corriendo bajo apache2 en ubuntu, pero lo mas curioso, es que la pagina que teneis para descargar de colores, me saca el gif de colores, copio esa linea textualmente a mi documento, y tampoco sale nada, es un absurdo, porque la misma linea de codigo en el mismo directorio referenciada a la misma imagen no funciona en un html y en el otro si...

Saludos.

Lancro

19/10/2010
A ver si me sabes responder a esta...
Bien, esto es bastante simple, y a la vez demasiado complejo...

Si pongo, a mano, sobre el html <img scr="imagen.gif"> me sale un cuadradito con la mini imagen de imagen rota, ahora, si cojo el <img src="images.gif"> copiado de otro documento web, viendo el codigo, copiar desde alli hasta el html, la imagen sale, cuando ambos codigos son exactos, es mas los he puesto uno encima del otro, uno puesto a mano, y otro con cortar y pegar, y solo sale una imagen, la otra sale como rota, estoy funcionando bajo apache2, el editor es el gedit de ubuntu, no tiene nada de sentido esto, me gustaria poder poner imagenes sin tener que ir copiando el codigo...

Saludos.

NANY

28/10/2010
GRACIAS
GRACIAS ME SIRVIO MUCHO DE AYUDA TU EXPLICACION

Florencia

23/11/2010
GRACIAS!
Gracias por la info. me sirvió para publicar avisos en mercado libre. Te hago una consulta...que codigo se usa para alinear una imagen a la izquierda y otra a la derecha, en la misma línea?

Gracias de nuevo!!!

Alan

29/11/2010
pregunta
sabes estoy creando una web y tengo 2 imagenes en script y las tienen el mismo tmaño lo que quiero es alinear una a la derecha y la otra a la izquierda a la misma altura como si fueran una sola y no me sale
ESTA IRA A LA DERECHA
<center><script src="http://h2.flashvortex.com/display.php?id=2_1290961844_29983_347_0_468_60_9_2_21" type="text/javascript"></script></center>

Y ESTA A LA IZQUIERDA
<center><script src="http://h2.flashvortex.com/display.php?id=2_1290796112_35835_318_0_468_60_8_2_20" type="text/javascript"></script></center>

COMO LOS UNO ... GRACIAS

Zakura

15/12/2010
Muy Bueno! :D
Muchas gracias x la info! n.n estuve como loca buscando eso DX! pero aah! es un alivio que lo hayas publicado :D! mi hi5 kedo muy bien con esos codigos! n.n
//o eso digo yo XD// haha~ XD bueno,,muchas gracias! :DDD!
Mi hi: x si lo kieren ver XD
http://zakurithap-nekithap.hi5
:3 baii!

jorge

15/12/2010
El post esta mal .
El codigo que nos dan esta bien , pero no esta del todo completo , deben de poner este codigo que es el mismo , con la diferencia que agrega una tabla ¡no visible¡ .
aki lo dejo:
<p>

<table align="center" width="320" cellspacing="2" cellpadding="2" border="0">

<tr><td align="center" class="fuente8">Quedaría así:</td></tr>

<tr>

<td>

<img src=".gif" align="right" width="158" height="75">la unica dgerencia que ahora la imagen si que se encuentra a llado
</td>

</tr>

</table>

jmora99

12/3/2011
He verificado todo
Pues estoy siguiendo el curso y esta excelente, hay algunos errores pero nada que no se pueda resolver con experimentar un poco. He visto un par de errores en los que comentan, el atributo es "src" (de source) y no "scr", con eso creo que ayudo a 3 amigos que comentaron. Los demás sale muy bien, no hay necesidad de utilizar tablas aun.

wendyzeta

07/4/2011
hola
y gracias por hacerlo todo mas facil ;-)

pepi

30/5/2011
necesito ayuda!!!!!
no me sale el texto alineado al lado de la imagen, pongo <p> <img="imagen.jpg" align="right"> eeste texti deberia ur al lado de la imagen, en el lado opuesto blalblal.... </p> gracias, a ver si hay alguien que me pueda ayudar, me sale la imagen y solo un trocito al lado de la imagen

jhonatan

11/7/2011
muy bueno
sin esto no hacia naa,,, gracias brothrrr..

caterine

27/9/2011
hola
no me sirvio para nada okey

Xanat

30/7/2012
Deprecated.
Hola.

He investigado un poco sobre la solución sugerida, pero el atributo 'aling' está obsoleto desde el HTML 4.x, y en su lugar se emplea css. Ya sea a través de una hoja de estilo (.css) o dentro del contenido de la página.

CSS:

.centrar-imagen {
text-align: center;
}
img {
display: block;
margin: auto;
}

<div class="centrar-imagen"><img src="ruta"></div>

HTML:

<div style="text-align: center; "><img src="ruta"></div>

samblake

11/4/2013
Solicito ayuda...
¿Como puede alinear la imagen al centro porque no me lo permite?¿estará limitado con los margenes? estoy editando un theme y no doy con ello

gracias por vuestra ayuda

Edgar

22/9/2013
tutoria para alinear texto
esta pagina es lo mejor me fue de mucha ayuda excelente el trabajo de ustedes gracias sigan así !!!!!

Mentewebs

04/6/2014
Practico
Buena ayuda...!

Alan

07/7/2014
Gracias
Lo estaba buscando desde hace rato xD

Tenga Éxito

11/8/2014
Gracias
Esta web me Ha ayudado mucho si quieren pueden ver por sus propios ojos mi sitio http://tengaexito.de.tl/

Matias

24/8/2014
Gracias
Muy buena ayuda! Me ha servido muchisimo como principiante. Cuesta encontrar paginas tan útiles como esta.

migue

07/10/2014
como insertar imagenes
hola solo para preguntarles como le hago para poner tres imágenes en una sola linea es decir que ni una se vaya abajo....