sábado, 6 de octubre de 2012

Centrar imágenes en Blogger utilizando CSS

 Esta entrada es útil tan sólo para los que aún utilizamos las plantillas de Blogger antiguas. He podido comprobar que al utilizar el editor de Blogger para subir las imágenes centradas, en algún blog me aparecen posicionadas hacia la izquierda (usando el navegador Mozilla Firefox).

 Este problema lo he subsanado añadiendo el código correspondiente al elemento HTML img en la entrada, pero he pensado que quizá sea mejor hacerlo vía CSS, buscando en la plantilla (teclas Ctrl+F) la línea de código .post img y añadiendo los parámetros habituales de centrado; si no existe, habrá que probar suerte añadiendo al completo el nuevo código en las Hojas de Estilo en Cascada de la plantilla (siempre antes del valor resaltado en rojo):
.post img {
  display: block;
  margin: auto;
  text-align: center;
}

]]></b:skin>
 Después bastará con subir la imagen con el editor del blog y quedará centrada automáticamente, como en el siguiente ejemplo:
<div style="clear: both;"><a href="http://2.bp.blogspot.com/-FlJ7f3Fh7kw/UHAs-k6-bvI/AAAAAAAAAqg/z5zujRR3PjE/s1600/Mariquita_00.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;" title="Mariquita sobre una hoja"><img alt="Mariquita" height="240" src="http://2.bp.blogspot.com/-FlJ7f3Fh7kw/UHAs-k6-bvI/AAAAAAAAAqg/z5zujRR3PjE/s320/Mariquita_00.jpg" title="Mariquita sobre una hoja" width="320" /></a></div>
Mariquita

No hay comentarios: