---
title: "Anpassung der Bildausrichtung"
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:42:59Z
published: 2026-06-22T08:42:59Z
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.

# Anpassung der Bildausrichtung

Der CSS-Ausschnitt " **Center align images in articles** " ermöglicht es Ihnen, alle Bilder in Ihrem Knowledge Base-Artikelinhalt zu zentrieren. Standardmäßig sind die Bilder links ausgerichtet. Man kann auch manuell CSS schreiben, um Bilder nach links oder rechts auszurichten oder um Bildproportionen beizubehalten, wenn die Seite vergrößert wird.

---

## Wie man Bilder zentriert ausrichtet

1. Navigieren Sie in der linken Navigationsleiste des Wissensdatenbank-Portals zu  () > **Knowledge base site** .
2. Im linken Navigationsfenster navigieren Sie zur **Site-Anpassung**.

![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. Klicken Sie **auf benutzerdefiniertes CSS & JavaScript**.
2. Wähle den **CSS-Tab** aus und klicke oben rechts **auf "Code-Schnipsel hinzufügen** ".
3. Klicken **Sie auf Mitte und richten Sie Bilder in Artikeln aus**. Der Snippet wird in den CSS-Editor eingefügt.
4. Klicken **Sie auf Speichern**.

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

Der verwendete CSS-Snippet lautet:

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

Alle Bilder im Artikelinhalt sind nun mittelzentrisch über die gesamte Wissensdatenbank ausgerichtet.

 WICHTIG

Bevor du einen neuen Ausrichtungssnippet hinzufügst, entferne den zuvor hinzugefügten. Wenn zwei Ausrichtungsschnipsel gleichzeitig aktiv sind, kommen sie zu Konflikten und führen zu unvorhersehbaren Ergebnissen. Die festgelegte Bildausrichtung gilt für die gesamte Wissensdatenbank.

---

## Wie man Bilder links ausrichtet

Um Bilder links auszurichten, fügen Sie das folgende CSS direkt in den CSS-Editor ein:

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

---

## Wie man Bilder richtig ausrichtet

Um die Bilder rechts auszurichten, fügen Sie das folgende CSS direkt in den CSS-Editor ein:

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

---

## Wie man Bildproportionen beim Anpassen der Größe beibehält

Um die Text- und Bildproportionen beim Ein- oder Auszoomen der Wissensdatenbank beizubehalten, fügen Sie folgendes CSS in den CSS-Editor ein:

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

Klicken Sie auf **Speichern** , um sich zu bewerben.

---

## Wie man einen zuvor hinzugefügten Ausrichtungssnippet entfernt

Wähle den Snippet-Code im CSS-Editor aus und drücke auf deiner **Tastatur Delete,** um ihn zu entfernen. Klicken Sie auf **Speichern** , um die Änderung anzuwenden.

---

## Best Practices

- **Entfernen Sie den vorherigen Snippet, bevor Sie die Ausrichtung wechseln** – wenn Sie einen mittig ausgerichteten Snippet hinzufügen, während ein linksausgerichteter Snippet noch aktiv ist, führt das zu Konflikten. Lösche immer zuerst den alten Ausschnitt.
- **Verwenden `!important` Sie es sorgfältig** – die Schnipsel werden `!important` verwendet, um Standardstile zu übersteuern. Vermeiden Sie es, andere CSS-Images hinzuzufügen, die ebenfalls verwenden `!important`, da diese unvorhersehbar widersprechen können.
- **Wende CSS zusammen mit der Ausrichtung** der Größe an – wenn du die Bildausrichtung änderst, wende auch den `height: auto` Größenanpassungs-Snippet an, um sicherzustellen, dass die Bilder auf verschiedenen Bildschirmgrößen korrekt skalieren.