CSS: Imagenes con pie de foto

Agregar imágenes en nuestro sitio o blog, es algo sencillo. Pero al tratar de colocarle un texto descriptivo a la imagen la tarea se complica bastante. En especial cuando se quiere que el texto permanezca junto con la imagen, ya sea por debajo o por arriba.

Es por eso que a lo largo de esta entrada veremos un sencillo pero útil recurso con el cual podremos agregar imágenes en nuestro sitio/blog con un pie de foto sin despeinarnos.

Obviamente las posibilidades son infinitas, esta solo es una, que se me ocurrió mientras paseaba al perro por el parque. Y gracias a Diana Reyes me decidí a publicarlo. En fin, la forma de agregar una imagen mediante este método es la siguiente:
Agregando lo anterior para cada imagen que insertemos en nuestro sitio/blog, obtendremos algo muy feo y nada agradable. Algo así:

Unicornio nadando, IMPOSIBLE!

Esto se arregla ingresando a Diseño>Edicion HTML y agregando justo antes de la etiqueta ]]><b:skin/>
Si realizamos lo anterior con éxito, la imagen que habíamos insertado ahora tendrá esta apariencia:

Lorem ipsum ad his scripta blandit partiendo, eum fastidii accumsan euripidis in, eum liber hendrerit an.

Pie de foto transparente

Con lo anterior se cumple con el objetivo, pero se podría hacer un par de cosas mas con esto. Por ejemplo, jugando un poco con la propiedad position y una etiqueta span mas tendríamos algo como esto:

Unicornio nadando, IMPOSIBLE!!

El código que debes agregar con cada imagen es el siguiente: Mientras que lo que se agrega en Diseño>Edicion HTML justo antes de la etiqueta ]]></b:skin> es:

Posición de la imagen

Al igual que cualquier otra imagen, este código puede alinearse a la iquierda, derecha o centro. Solo que para esto es necesario agregar antes de ]]></b:skin> el siguiente código: Este código es aparte de los otros códigos, este solo es para alinear nuestra imagen. Su utilizacion es de la siguiente manera: