Alinear una Imagen al Centro con CSS

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;
En general, las 2 anteriores líneas son las que se deben usar para centrar cualquier imagen. La primera hace que las imágenes se muestren en bloque generando un nuevo renglón entre el cuerpo del texto, y la segunda hace que el margen para todos los lados se automatice haciendo que quede igual arriba, abajo, a la izquierda y a la derecha. De esta forma la imagen queda centrada y es muy útil en mi caso por ejemplo, para centrar todas las imágenes de los Artículos automáticamente.
El código finalmente entonces debe quedar así:
#content .single img {
display: block;
margin: auto;
}

Espero que este sencillo tutorial les funcione a la perfección en sus Blogs o Sitios web. Cualquier duda será atendida a la menor brevedad.

Puedes seguir los comentarios de esta entrada a través de RSS 2.0 Usted puede dejar un comentario, o trackback.

Acerda de Juan Sebastián

Ingeniero de Sistemas y Telecomunicaciones de la Universidad de Manizales (Colombia) con énfasis en Redes y Seguridad Informática. Creador y administrador de ComuSOFT.com y apasionado del mundo de las redes de telecomunicaciones, el Software libre, Linux y la Seguridad de la Información. Actualmente me desempeño como Help Desk Engineer en una importante Multinacional de Seguridad Informática en Latino América. En lo que pueda colaborarte, lo haré con gusto!
Escribe un Comentario

Una respuesta



Escribe un comentario

Tu dirección de correo electrónico no será publicada. Los campos necesarios están marcados *