Al no existir un método en CSS para centrar las imágenes de nuestros sitios web tan fácil como lo hacemos con los textos, o con las mismas imágenes pero con HTML, existe una opción verdaderamente sencilla que permite centrar una imagen y hacerla visible en cualquiera de los navegadores más recientes (probado en IE 9, Firefox 5 y Chrome 12) correctamente.

Hay que tener en cuenta el lugar donde se quieran centrar las imágenes, ya que si se hace en la plantilla general, se centrarán todas las imágenes del sitio y se dañará la estructura. Por lo general la clase de las imágenes en CSS es img, entonces pueden usar las demás clases para hacer que solo determinadas partes del sitio centren las imágenes.

A modo de ejemplo, voy a explicar como centrar las imágenes únicamente del cuerpo del Post. Para mi theme la clase que define el estilo del Post es #content .single por lo que para hacer el procedimiento utilizo este código y le agrego el img que es la que representa las imágenes en mi tema. Creo entonces una nueva línea en mi style.css que quedaría:

#content .single img {

}

Ahora para centrar las imágenes que contengan el anterior parámetro, basta con agregar dos líneas.

• display: block;
• margin: auto;

#content .single img {

display: block;

margin: auto;

}