---
title: "Personalización de la alineación de imágenes"
slug: "image-alignment"
description: "Image alignment helps you keep your image in the intended area, either left, right or centre and modifying it helps optimize the site experience for the user. "
tags: ["CSS Snippets"]
updated: 2026-06-22T08:47:53Z
published: 2026-06-22T08:47:53Z
canonical: "docs.document360.com/image-alignment"
---

> ## Documentation Index
> Fetch the complete documentation index at: https://docs.document360.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Personalización de la alineación de imágenes

El fragmento CSS **de alineación del Centro** te permite centrar todas las imágenes en el contenido de tu base de conocimiento. Por defecto, las imágenes están alineadas a la izquierda. También puedes escribir manualmente CSS para alinear las imágenes a la izquierda o derecha, o para mantener las proporciones de imagen cuando la página se redimensiona.

---

## Cómo centrar las imágenes

1. Navega a Configuración () > Sitio de la base de conocimientos en la barra de navegación izquierda del portal de la Base de Conocimientos.
2. En el panel de navegación izquierdo, navega hasta **personalización del sitio**.

![Site customization page showing the Custom CSS and JavaScript option](https://cdn.document360.io/860f9f88-412e-4570-8222-d5bf2f4b7dd1/Images/Documentation/Site_Customization_Custom_CSS&JavaScript.png)

1. Haz clic **en CSS y JavaScript personalizados**.
2. Selecciona la pestaña **CSS** y luego haz clic **en Añadir fragmentos de código** en la esquina superior derecha.
3. Haz clic **en centrar y alinear imágenes en los artículos**. El fragmento se inserta en el editor CSS.
4. Haz clic **en Guardar**.

![CSS editor showing the Center align images snippet and the resulting centered image in the knowledge base](https://cdn.document360.io/860f9f88-412e-4570-8222-d5bf2f4b7dd1/Images/Documentation/Site_Customization_Center_align_Images.png)

El fragmento de CSS utilizado es:

```
article img {
    margin: 0 auto !important;
    display: block;
}
```

Todas las imágenes en el contenido del artículo ahora están alineadas hacia el centro en toda la base de conocimiento.

 IMPORTANTE

Antes de añadir un nuevo fragmento de alineación, quita el que se añadió antes. Si dos fragmentos de alineación están activos al mismo tiempo, entrarán en conflicto y producirán resultados impredecibles. La alineación de imagen que se establece se aplica a toda la base de conocimiento.

---

## Cómo alinear imágenes a la izquierda

Para alinear las imágenes a la izquierda, pega el siguiente CSS directamente en el editor CSS:

```
article img {
    margin: auto 0 0 0 !important;
    display: block;
}
```

---

## Cómo alinear bien las imágenes

Para alinear las imágenes a la derecha, pega el siguiente CSS directamente en el editor CSS:

```
article img {
    margin: 0 0 0 auto !important;
    display: block;
}
```

---

## Cómo mantener las proporciones de imagen al redimensionar

Para mantener las proporciones de texto e imagen cuando los lectores acercan o alejan el zoom en la base de conocimiento, pega el siguiente CSS en el editor CSS:

```
article img {
    height: auto !important;
}
```

![CSS editor showing the image resizing snippet that maintains proportions when the page is zoomed](https://cdn.document360.io/860f9f88-412e-4570-8222-d5bf2f4b7dd1/Images/Documentation/Site_Customization_Resizing_images.png)

Haz **clic en Guardar** para postularte.

---

## Cómo eliminar un fragmento de alineación añadido previamente

Selecciona el código fragmentado en el editor CSS y pulsa **Suprimir** en tu teclado para eliminarlo. Haz clic **en Guardar** para aplicar el cambio.

---

## Mejores prácticas

- **Elimina el fragmento anterior antes de cambiar la alineación** : añadir un fragmento de alineación central mientras uno de alineación izquierda sigue activo causará conflictos. Borra siempre primero el fragmento antiguo.
- **Úsalo `!important` con cuidado** : los fragmentos sirven `!important` para anular los estilos predeterminados. Evita añadir otras reglas CSS de imagen que también usen `!important`, ya que pueden entrar en conflicto de forma impredecible.
- **Aplica CSS de redimensionamiento junto con la alineación** : si cambias la alineación de la imagen, también aplica el `height: auto` fragmento de redimensionamiento para asegurarte de que las imágenes escalen correctamente en diferentes tamaños de pantalla.