Centrar una imagen con enlace y junto con texto en un post de Blogger

 Para empezar, inserto una imagen en esta entrada (o post) utilizando el editor actualizado de Blogger; el código que obtengo es el siguiente (he resaltado en rojo la parte del código que a mí me resulta totalmente innecesaria, aunque se puede mantener sin ningún problema):

<div class="separator" style="clear: both; text-align: center;"><a href="http://4.bp.blogspot.com/_4a-2T-ux0oY/TNAAUCH-rfI/AAAAAAAAAfA/hxnHEDQTkJU/s1600/Entrada-Castillo+de+Pe%C3%B1afiel_00A.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="320" nx="true" src="http://4.bp.blogspot.com/_4a-2T-ux0oY/TNAAUCH-rfI/AAAAAAAAAfA/hxnHEDQTkJU/s320/Entrada-Castillo+de+Pe%C3%B1afiel_00A.jpg" width="276" /></a></div>

 Al analizar el código suministrado por Blogger, podremos llegar a las siguientes conclusiones:

• En el bloque div se incluye una clase (class) CSS que no se suele usar y que generalmente no está definida en la plantilla.
• En el enlace se incluye el atributo imageanchor, al que no le encuentro ninguna utilidad en este caso.
• El atributo border es preferible tenerlo definido en plantilla, con CSS.
• El atributo nx me resulta totalmente desconocido.
• En lugar de definir el tamaño con style, se utilizan los atributos height y width, que deben eliminarse si se utiliza alguna clase CSS especial.

 Para centrar la imagen en cuestión, que en este caso ya va enlazada al servidor de Blogger (etiquetada en Álbumes Web de Picasa) y que va a ir acompañada de un texto que añado yo, lo que hago es incluir los tres elementos (enlace, imagen y texto) en un mismo bloque div. También añado los atributos title y alt, con sus respectivas descripciones. Dado que la etiqueta span no se corresponde en modo alguno con bloques, es conveniente añadirle la propiedad display: block, la cual transforma cualquier etiqueta inline en una de bloque. Así, el código a utilizar sería el siguiente:

<div style="clear: both; text-align: center;"><a href="http://4.bp.blogspot.com/_4a-2T-ux0oY/TNAAUCH-rfI/AAAAAAAAAfA/hxnHEDQTkJU/s1600/Entrada-Castillo+de+Pe%C3%B1afiel_00A.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;" title="Entrada de la primera barrera del Castillo de Peñafiel"><img alt="Entrada del Castillo de Peñafiel" height="320" src="http://4.bp.blogspot.com/_4a-2T-ux0oY/TNAAUCH-rfI/AAAAAAAAAfA/hxnHEDQTkJU/s320/Entrada-Castillo+de+Pe%C3%B1afiel_00A.jpg" title="Entrada de la primera barrera del Castillo de Peñafiel" width="276" /></a><span style="color: #741b47; display: block; font-size: x-small;">Entrada de la primera barrera del Castillo de Peñafiel (Valladolid).</span></div>

Entrada de la primera barrera del Castillo de Peñafiel (Valladolid).