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

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

Site customization page showing the Custom CSS and JavaScript option

Klik op Custom CSS & JavaScript.
Selecteer het tabblad CSS en klik rechtsboven op Add code snippets .
Klik op Midden uitlijnen afbeeldingen in artikelen. Het fragment wordt in de CSS-editor geplaatst.
Klik op Opslaan.

CSS editor showing the Center align images snippet and the resulting centered image in the knowledge base

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

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 !importantvan , 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.

Documentation Index