Como centrar una imagen con HTML y CSS

Centrar imágenes por medio de HTML o CSS es un procedimiento sencillo para un problema bastante molesto. No hay una solución única para hacerlo, porque depende de como esté maquetada tu página.

Como este artículo no está pensado para usuarios con conocimientos avanzados, y si más bien para el que llegue buscando hacer copy&paste, no vamos a dar una explicación técnica de cada método.

Lo ideal si no tienes grandes conocimientos de HTML o de CSS, es ir probando cada método hasta que consigas centrar la imagen. Se hace rápidamente.

Cómo centrar una imagen con HTML

Para este método te explicaré cómo alinear el texto para centrar la imagen. Ten en cuenta que en el código “middle” es la que representará la alineación de las imágenes.

1. Ubícate en el texto y en una nueva línea en blanco coloca <img src=”nombreImagen.gif”
2. En la misma línea coloca “alt=”descripción de la imagen” (esto es más para SEO que para otra cosa)
3. Y cierra con “P”

Otra etiqueta que puedes usar es la siguiente:

1. En una nueva línea de texto escribe “<center>”
2. Debajo pon lo siguiente “<img src=”nombreImagen.gif” alt=”descripción de la imagen”
3. En la misma línea de texto especifica las dimensiones de la imagen usando height=”# que quieras” width=”# que quieras“
4. Cierra nuevamente con “center”
5. Te debe quedar algo asi “<center><img src=”imagenx.gif” alt= “Imagen x” height= “100” width= “200”></center>

Como ves es algo sencillo ya que solo tienes que especificar características de la imagen que quieres centrar. Ahora te mostrare como llevar a cabo lo mismo con CSS.

Cómo centrar una imagen con CSS

Este caso es un poco más complicado que el anterior. Pues CSS no tiene una eficiente trato del formato IMG. Aún así te mostraré algunas opciones que puedes aplicar.

1. Elige el nombre de la imagen.
2. Escribe lo siguiente “img {display: block; margin: auto;}”. Esto lo usarás para crear las márgenes de la imagen de manera proporcional.

Esa solución no es posible aplicarla en Internet Explorer. Puedes intentar con la siguiente opción también.

1. En el cuadro contenedor vas a colocar “text:align – center”
2. Tendrá que quedarte algo así “<div style=”text – align:center”><img src=”http://direccion/de/la/imagen.jpg”/></div>

La siguiente opción te funcionará para centrado relativo o porcentajes por medio de padding y margin. Usando el siguiente código:

img style=”padding-left:150px;”border=”0″ src=”http://ejemplo/centrar.jpg” alt= “centrar imagen con padding” 

La propiedad “padding left” es necesaria en CSS porque este generalmente alinea las imágenes hacia la izquierda. Pero será necesario conocer el tamaño del espacio y compararlo con la imagen. Suele ser complicado hacerlo por medio de DIV o SPAN.

Puedes hacer este tipo de modificaciones en el código, aunque no siempre te funcione sé creativo y trata de usar varias soluciones. Espero que este artículo te haya servido para centrar tus imágenes con css y HTML.