30/5/13

Cómo alinear las imágenes con html

Sonia ha escrito un apéndice para completar el magnífico tutorial que vimos ayer. Os quiere enseñar cómo podéis alinear las imágenes a donde os convenga (arriba, abajo, al centro, etc.) para que queden más ordenaditas y bonitas.

Os dejo con ella:

Nota: Este es un post invitado. No está escrito por mí. 

APÉNDICE POST INVITADO

Esto es un apéndice al tutorial sobre cómo poner imágenes a las etiquetas.

Elis, del blog Coulís de Limón, ya ha empezado a poner iconos en sus etiquetas (¡qué rapidez la de esta chica!) y me pregunta cómo podría centrar las imágenes verticalmente para que queden mejor en su blog.

Es muy sencillo, sólo tenéis que añadir este texto dentro de vuestra línea de imagen (dentro de la etiqueta HMTL):

align='middle'

Es decir, cada una de vuestras líneas quedaría algo así (estoy dicendo que a la etiqueta oso le asigno la imagen Label_oso.jpg y que quiero que esté centrada verticalmente):


Y éste es un ejemplo de cómo quedaría. Las etiquetas oso y rojo están centradas verticalmente y las etiquetas amarillo y azul no, así podéis ver la diferencia:



Por si queréis cacharrear un poco (que es lo divertido), éstos son todos los valores que admite la etiqueta de HTML align:

  • absbottom (inferior absoluta)
  • absmiddle (medio absoluta)
  • baseline (línea de base)
  • bottom (inferior)
  • left (izquierda)
  • middle (medio)
  • right (derecha)
  • texttop (texto superior)
  • top (superior)

Probad  sin miedo cuál es la que mejor se ajusta al diseño de vuestro blog (eso sí, acordaos de salvar la plantilla antes y de visualizar todos los cambios antes de grabar).


¡Mil millones de gracias, Sonia, por la explicación y por la molestia!

Con vosotras da gusto :)

Por cierto, no olvidéis que aquí todos somos blogueros. Aunque Sonia sea informática, cada uno sabemos de una cosa. 

Me encantaría recibir propuestas vuestras de posts invitados para publicar aquí. Cualquier cosa que creáis que pueda ser útil para el resto de personas que leen este blog será bienvenido: desde posts como el de ayer sobre una app con la que crear cartelitos, pasando por trucos para sacar mejores fotos... cualquier cosa puede valer!

Enviadme vuestros posts (escritos en HTML) a personalizaciondeblogs@hotmail.com con el asunto "Propuesta para post invitado". 

Un beso y hasta mañana, 

Únete a mi newsletter para recibir cada semana un resumen con trucos y recursos

13 comentarios

  1. Desde luego, cada día se aprende algo nuevo. Esto blog es un pozo sin fondo.
    Enhorabuena.

    ResponderEliminar
  2. Hola guapa,
    muy buena complementación con el post de ayer, cuando tenga un rato lo miro detenidamente. Seguro que queda bonito.

    un besito enorme ♥

    ResponderEliminar
  3. Dios! Eres un crack lo tuyo si es rapidez! Esta noche me pongo.

    Muchos besos a las dos!

    Eli

    ResponderEliminar
  4. Me encantan tus post, yo soy una negada a la hora de hacer todas estas cosas y me estás ayudando un montón!! Gracias!!

    ResponderEliminar
  5. Mil gracias Blanca y Sonia. Un besico.

    ResponderEliminar
  6. Más completa la explicación no podia ser

    Gracias guapa :)

    ResponderEliminar
  7. Gracias a las que compartís sabiduría..... me encanta

    ResponderEliminar
  8. Me falta tiempo para poner en practica todos los trucos que nos enseñas ,aun no he tenido tiempo de echar un vistazo al tutorial del monito .
    Muchas gracias a Sonia y a ti por compartirlo.
    Bicos mil wapa.

    ResponderEliminar
  9. Pues muy interesante y útil!! A mi el html me da un poco de miedo porque por una coma ya te cambia todo!! Pero está muy bien explicado!!
    Un besito!!

    ResponderEliminar
  10. Hola!! me parece un tutorial super interesante y Sonia lo explica genial voy corriendo a su blog a ver como queda puesto
    Un besito

    ResponderEliminar
  11. Me parece muy buena la información. En cuanto pueda recuperar mi portátil (entre marido y niñas) no hay forma de rediseñada el blog.
    Muchísimas gracias

    ResponderEliminar

© Personalización de Blogs. Diseño: Eve y Blanca.