Header Ads

Alineación de Imágenes y Texto en HTML

alineacion de imagenes y texto

Al igual que en la alineación de textos, la alineación de imágenes se efectúa de manera similar. A continuación utilizaremos el atributo "align" dentro de la etiqueta "img" para alinear el gráfico.

En el siguiente ejemplo utilizaremos la etiqueta <img src="imagen1.jpg" align="left"> en la cual el gráfico se alineara a la izquierda y para hacerlo mas atractivo colocaremos un border="1" y un poco de texto alineado a la derecha.

Código HTML:

El código HTML variara según las indicaciones que se irán dando a lo largo de este post.



Resultado:



Imagen alineada a la izquierda, seguido de un texto alineado a la derecha

Ahora en el siguiente ejemplo utilizaremos la etiqueta <im src="imagen1.jpg" align="right">; en la cual el gráfico se alineara a la derecha.

Resultado:


texto alineado a la izquierda, seguido de una imagen alineada a la derecha

Ahora en este ejemplo utilizaremos <img src="imagen1.jpg" align=" middle">  para alinear el texto en la parte intermedia a la imagen:

Resultado:



texto en la parte intermedia de la imagen alineada a la Izquierda

Ahora en este caso utilizaremos <img src="imagen1.jpg" align="baseline"> donde el texto sera alineado en la parte inferior del gráfico.

Resultado:



Imagen alineada a la Izquierda, seguido de un texto en parte inferior de esta.

OJO: es de suma importancia resaltar que cuando no se especifica un parámetro al atributo "align" la imagen o cualquier otro objeto se alinea a la izquierda por defecto.






16 comentarios:

  1. me encanta este blog me ayudo un buen graxias¡....

    ResponderEliminar
  2. HOLA DISCULPA, YO YA SE HACER ESTO, PERO LO QUE QUIERO HACER ES HACERLO PERO QUE LA IMAGEN TENGA ENLACE PARA REDIMENSIONAR A OTRA PAGINA, YA ME DUELE LA CABEZA DE TANTO BUSCAR Y NADIE LO TIENE. AYUDAME PORFA SI?

    ResponderEliminar
    Respuestas
    1. Hola anónimo en este Blog tenemos un Post que te puede ayudar si deseas visita: Imágenes con enlace en Blogger y HTML
      espero que esta información te sirva Gracias por Comentar!

      Eliminar
  3. Excelente blog es de gran ayuda, el tip es de gran ayuda.

    ResponderEliminar
  4. otro: Mi imagen se corresponde a una palabra escrita con simbolos en un alfabeto inventado. ¿Como puedo hacer para que esa imagen (que tiene que ir en medio de una frase) actue como texto y se encoja o expanda en función de la pagina?

    ResponderEliminar
    Respuestas
    1. Hola Anonimo nunca en verdad nose si sea posible hacer que una imagen actué como texto, es ams creo que es imposible hacer eso, pero si se puede manipular el tamaño de la imagen en función de la pagina con estilos CSS o simples atributos width y height

      Eliminar
    2. si se puede, aplica un estilo "liquid" (liquido) en la hoja de estilo en cascada (css) y al cambiar de tamaño la pantalla igual la imagen se alineara y cambiara de tamaño, y con muchas mas posibilidades. Saludos.

      Eliminar
    3. Hola Cesar, muchas gracias por tu aporte, gracias por comentar

      Eliminar
  5. hola disculpa pero al poner tres imagenes con tres texto osea cada una con su definicion sea orizontal o vertical no se ubican que hago?' osea cada imagen que lleve su texto a los lados o debajo ..el problema es que al colocar la segunda imagen la alineo hacia el centro y no me sale sale al centro pero no arriba sino mas abajo ayudame porfa

    ResponderEliminar
  6. si se puede, aplica un estilo "liquid" (liquido) en la hoja de estilo en cascada (css) y al cambiar de tamaño la pantalla igual la imagen se alineara y cambiara de tamaño, y con muchas mas posibilidades.

    ResponderEliminar
  7. Excelete blog, muy util la informacion acerca de como alinear img y txt, ver este enlace para empezar a bloguear:

    Como hacer un blog

    ResponderEliminar
  8. Este comentario ha sido eliminado por un administrador del blog.

    ResponderEliminar
  9. Muchas Gracias por tu Trabajo Neytor ;))

    Me ha servido, pero me gustaría incluir dos líneas de texto en el lateral de la imagen (los números) sin utilizar 'float' en nuestra página web > http://webart.es/sobre-nosotros/servicios-incluidos-gratis-al-crear-tu-pagina-web-blog-tienda-online

    ¿Sabes cómo podría hacerlo?

    Un saludo desde Barcelona!!

    ResponderEliminar
  10. buenas noche quisiera saber si me puede ayudar ya que estoy tratando de realizar la portada de google pero al alinear la parte inferior el texto me queda el del lado izquierdo mas alto que el de la derecha...que puedo hacer para tratar de alinearlos y que queden al mismo nivel gracias

    ResponderEliminar
  11. buenas noche quisiera saber si me puede ayudar ya que estoy tratando de realizar la portada de google pero al alinear la parte inferior el texto me queda el del lado izquierdo mas alto que el de la derecha...que puedo hacer para tratar de alinearlos y que queden al mismo nivel gracias

    ResponderEliminar