Cómo centrar imágenes con Markdown

Por defecto, las imágenes insertadas en Markdown con la sintaxis ![](...) se alinean a la izquierda, ya que se renderizan como elementos en línea dentro del párrafo. Markdown estándar no incluye ninguna sintaxis para centrar imágenes, así que para conseguirlo hay que recurrir a HTML o, en algunas plataformas, a atajos propios.

A continuación verás tres formas de centrar una imagen, ordenadas de más portátil a más restrictiva en cuanto a compatibilidad.

Centrar con la etiqueta align en HTML

La forma más antigua y compatible consiste en envolver la imagen en una etiqueta <p> con el atributo align="center". Aunque el atributo align está obsoleto en HTML5, la inmensa mayoría de plataformas lo siguen renderizando correctamente, incluida la vista previa de GitHub, GitLab y la mayoría de generadores de sitios estáticos.

En el siguiente ejemplo centramos una imagen con align:

<p align="center">
  <img src="/img/markdown.png" alt="Logo de Markdown" width="200" />
</p>

Si tu plataforma respeta el atributo, la imagen aparecerá centrada horizontalmente dentro de su contenedor. Es la opción recomendada para archivos README en GitHub, donde otras técnicas con CSS no funcionan.

Centrar con div y CSS en línea

Si trabajas en un entorno que admite el atributo style en HTML (blogs propios, generadores de sitios, documentación interna), la opción más limpia y moderna es usar un <div> con text-align: center. Es la forma correcta según los estándares actuales.

En el siguiente ejemplo centramos la imagen con CSS en línea:

<div style="text-align: center">
  <img src="/img/markdown.png" alt="Logo de Markdown" width="200" />
</div>

El resultado mostrará la imagen perfectamente centrada en su contenedor. Es la opción ideal cuando controlas el entorno de publicación.

Centrar mediante imagen con clase CSS

Si tienes la posibilidad de modificar la hoja de estilos del sitio donde se publica el documento (por ejemplo, en un Hugo, Jekyll o Astro propio), lo más mantenible es asignar una clase a la imagen y aplicar el centrado desde el CSS. Así puedes reutilizar el estilo y cambiarlo en un único punto.

Primero defines la clase en tu CSS:

img.centrada {
  display: block;
  margin-left: auto;
  margin-right: auto;
}

Y después aplicas la clase a la imagen usando HTML:

<img src="/img/markdown.png" alt="Logo de Markdown" class="centrada" width="200" />

Es la opción más limpia desde el punto de vista del mantenimiento, pero solo es viable cuando tienes acceso a la hoja de estilos del sitio.

Limitaciones a tener en cuenta

Plataformas muy restrictivas, como algunos foros o gestores de contenido antiguos, filtran tanto los atributos style como las etiquetas HTML que no entienden, por lo que ninguna de estas técnicas funcionará. En esos entornos lo único que queda es aceptar la alineación por defecto a la izquierda o, si la plataforma ofrece su propia sintaxis de imagen (como hacen algunos wikis), recurrir a ella.

Si lo que quieres es redimensionar la imagen además de centrarla, tienes los detalles en el consejo sobre redimensionar imágenes con Markdown. Y si lo que buscas es añadirle un pie de foto, consulta agregar leyendas a una imagen.

Esto ha sido todo.