sábado, 12 de diciembre de 2009

Centrar una imagen junto con texto en un post de Blogger

 Para centrar una imagen acompañada de un texto en un post de Blogger, podemos simplemente incluir los dos elementos en un mismo bloque div. Dado que las etiquetas img y span no son bloques, debemos añadirlas la propiedad display: block, que transforma cualquier etiqueta inline en una de bloque.

 Este sería el código para centrar la imagen y el texto en un mismo bloque (con la parte del código que rige el centrado resaltada en amarillo):
<div style="text-align: center;"><img alt="Exposición de París" src="http://img10.imageshack.us/img10/1598/exposicinpars00a.jpg" style="display: block;" title="Imagen de la Exposición Universal de París" /><span style="color: #741b47; display: block; font-size: x-small;">Imagen de la Exposición Universal de París de 1900.</span></div>
 Otra forma de hacerlo es incluyendo la imagen en un bloque y el texto en otro, sin olvidar añadir la propiedad display: block. Este sería el código para centrar la imagen y el texto en sus respectivos bloques (con las partes del código que rigen el centrado resaltadas en amarillo):
<img alt="Exposición de París" src="http://img10.imageshack.us/img10/1598/exposicinpars00a.jpg" style="display: block; margin: auto; text-align: center;" title="Imagen de la Exposición Universal de París" /><span style="color: #741b47; display: block; font-size: x-small; text-align: center;">Imagen de la Exposición Universal de París de 1900.</span>
Exposición de ParísImagen de la Exposición Universal de París de 1900.


-----------------------------------------------------------------------------emails de empresas-----------------------------------------------------------------------------

No hay comentarios: