---
title: "Beelduitlijning aanpassen"
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-22T09:03:17Z
published: 2026-06-22T09:03:17Z
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.

# Beelduitlijning aanpassen

De **Center align afbeeldingen in artikelen** CSS-fragment laat je alle afbeeldingen in je kennisbasis-inhoud centreren. Standaard zijn afbeeldingen naar links uitgelijnd. Je kunt ook handmatig CSS schrijven om afbeeldingen links of rechts uit te lijnen, of om de proporties van afbeeldingen te behouden wanneer de pagina wordt verkleind.

---

## Hoe je afbeeldingen centraal uitlijnt

1. Navigeer naar  () > **Knowledge base site** in de linker navigatiebalk van het Knowledge Base-portaal.
2. Navigeer in het linker navigatiepaneel naar **Site-aanpassing**.

![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. Klik **op Custom CSS & JavaScript**.
2. Selecteer het **tabblad CSS** en klik rechtsboven **op Add code snippets** .
3. Klik op **Midden uitlijnen afbeeldingen in artikelen**. Het fragment wordt in de CSS-editor geplaatst.
4. Klik **op Opslaan**.

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

Het gebruikte CSS-fragment is:

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

Alle afbeeldingen in artikelinhoud zijn nu midden uitgelijnd over de kennisbasis.

 BELANGRIJK

Verwijder voordat je een nieuw uitlijnfragment toevoegt, het eerder toegevoegde fragment. Als twee alignment-snippets tegelijkertijd actief zijn, zullen ze conflicteren en onvoorspelbare resultaten opleveren. De beelduitlijning die wordt ingesteld geldt voor de gehele kennisbasis.

---

## Hoe je afbeeldingen links uitlijnt

Om afbeeldingen naar links uit te lijnen, plakt u de volgende CSS direct in de CSS-editor:

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

---

## Hoe je afbeeldingen goed uitlijnt

Om afbeeldingen rechts uit te lijnen, plakt u de volgende CSS direct in de CSS-editor:

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

---

## Hoe je de verhoudingen van het beeld behoudt bij het aanpassen van de grootte

Om de tekst- en afbeeldingsverhoudingen te behouden wanneer lezers in- of uitzoomen op de kennisbanksite, plak je de volgende CSS in de CSS-editor:

```
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)

Klik op **Opslaan** om te solliciteren.

---

## Hoe verwijder je een eerder toegevoegde uitlijningssnippet

Selecteer de snippetcode in de CSS-editor en druk op **Delete** op je toetsenbord om deze te verwijderen. Klik **op Opslaan** om de wijziging toe te passen.

---

## Best practices

- **Verwijder het vorige snippet voordat je van alignment wisselt** - het toevoegen van een cutpet in het midden terwijl een links-uitgelijnde snippet nog actief is, veroorzaakt conflicten. Verwijder altijd eerst het oude fragment.
- **Gebruik `!important` het zorgvuldig** - de snippets worden gebruikt `!important` om standaardstijlen te overschrijven. Vermijd het toevoegen van andere image CSS-regels die ook gebruikmaken `!important`van , omdat deze onvoorspelbaar kunnen conflicteren.
- **Pas CSS toe met het aanpassen van grootte naast de uitlijning** - als je de uitlijning van het beeld verandert, pas dan ook het `height: auto` stukje verkleinen toe om ervoor te zorgen dat afbeeldingen correct schalen op verschillende schermgroottes.