---
title: "Personnalisation de l’alignement des images"
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:30:09Z
published: 2026-06-22T08:30:09Z
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.

# Personnalisation de l’alignement des images

Le clip CSS **d’alignement des images du Centre** dans les articles vous permet de centrer toutes les images dans le contenu de votre base de connaissances. Par défaut, les images sont alignées à gauche. Vous pouvez aussi écrire manuellement du CSS pour aligner les images à gauche ou à droite, ou pour maintenir les proportions des images lorsque la page est redimensionnée.

---

## Comment centrer les images

1. Naviguez dans  () > **Knowledge base site** dans la barre de navigation de gauche du portail de la base de connaissances.
2. Dans le panneau de navigation de gauche, naviguez vers **la personnalisation du site**.

![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. **Cliquez sur CSS & JavaScript personnalisés**.
2. Sélectionnez l’onglet **CSS** , puis cliquez sur **Ajouter des extraits de code** en haut à droite.
3. Cliquez **sur Centrer aligner les images dans les articles**. Le extrait est inséré dans l’éditeur CSS.
4. **Cliquez sur Enregistrer**.

![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)

L’extrait CSS utilisé est :

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

Toutes les images contenues dans le contenu de l’article sont désormais alignées au centre dans toute la base de connaissances.

 IMPORTANT

Avant d’ajouter un nouvel extrait d’alignement, retirez celui ajouté précédemment. Si deux extraits d’alignement sont actifs en même temps, ils entrent en conflit et produisent des résultats imprévisibles. L’alignement de l’image qui est défini s’applique à toute la base de connaissances.

---

## Comment aligner les images à gauche

Pour aligner les images à gauche, collez directement le CSS suivant dans l’éditeur CSS :

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

---

## Comment aligner correctement les images

Pour aligner les images à droite, collez directement le CSS suivant dans l’éditeur CSS :

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

---

## Comment maintenir les proportions d’image lors du redimensionnement

Pour maintenir les proportions du texte et de l’image lorsque les lecteurs zooment ou dézooment sur le site de la base de connaissances, collez le CSS suivant dans l’éditeur 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)

Cliquez **sur Enregistrer** pour postuler.

---

## Comment retirer un extrait d’alignement ajouté précédemment

Sélectionnez le code extrait dans l’éditeur CSS et appuyez **sur Supprimer** sur votre clavier pour le supprimer. Cliquez **sur Enregistrer** pour appliquer le changement.

---

## Meilleures pratiques

- **Retirez le extrait précédent avant de changer d’alignement** – ajouter un extrait d’alignement centré alors qu’un extrait à alignement à gauche est encore actif provoquera des conflits. Supprime toujours l’ancien extrait en premier.
- **Utilisez `!important` prudemment** – les extraits servent `!important` à remplacer les styles par défaut. Évitez d’ajouter d’autres règles CSS d’image qui utilisent `!important`également , car elles peuvent entrer en conflit de manière imprévisible.
- **Appliquez un CSS de redimensionnement en même temps que l’alignement** – si vous changez l’alignement de l’image, appliquez aussi le `height: auto` fragment de redimensionnement pour vous assurer que les images s’adaptent correctement à différentes tailles d’écran.