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.

Haftungsausschluss: Dieser Artikel wurde durch maschinelle Übersetzung erstellt.

Anpassung der Bildausrichtung

Prev Next

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

  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

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.


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

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.