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

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

Site customization page showing the Custom CSS and JavaScript option

Cliquez sur CSS & JavaScript personnalisés.
Sélectionnez l’onglet CSS , puis cliquez sur Ajouter des extraits de code en haut à droite.
Cliquez sur Centrer aligner les images dans les articles. Le extrait est inséré dans l’éditeur CSS.
Cliquez sur Enregistrer.

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

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

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.