Paramètres d’alignement des images WordPress – expliqués!

Le sujet de l’alignement des images est un sujet généralement mal compris par les débutants de WordPress. Lorsque vous allez ajouter une image à votre contenu (dans des publications ou des pages), WordPress vous propose quatre façons par défaut d’aligner cette image: aligner “Gauche”, aligner “Centre”, aligner “Droite” et aligner “Aucun” *.


Jetons un coup d’œil à chacun d’eux tour à tour:

1. Aligner à gauche

Une image à laquelle un alignement à gauche a été affecté sera effectivement poussée vers la gauche de la section de la page dans laquelle elle se trouve (telle que la limite gauche de votre publication WordPress de contenu de page), et tout autre contenu (tel que du texte) sera enrouler autour de ses trois autres bordures – en remplissant la zone à droite de l’endroit où se trouve l’image.

Exemple:

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Alignez à gauche Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo conséquat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.

2. Aligner le centre

Si vous souhaitez que votre image soit centralisée dans la section de la page dans laquelle elle se trouve (c’est-à-dire avec un espacement égal entre le bord de la zone de contenu et ses bordures gauche et droite), choisissez un alignement “Central”. Contrairement à l’alignement “ gauche ” mentionné ci-dessus, tout contenu voisin (tel que le texte) ne s’enroulera pas autour de l’image – il sera plutôt positionné au-dessus ou en dessous de l’image (selon l’endroit dans le texte que vous avez choisi d’insérer) ladite image).

Exemple:

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Aligner le centre Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

3. Aligner à droite

L’alignement à droite d’une image est, comme vous vous en doutez, à peu près l’inverse exact de l’alignement à gauche d’une image – l’image sera poussée à droite de la section de la page dans laquelle elle se trouve (c’est-à-dire la limite droite de votre Publication de contenu de page WordPress), et tout autre contenu (tel que du texte, etc.) s’enroulera autour de ses trois autres bordures: remplissant ainsi la zone à gauche de celle-ci.

Exemple:

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Image alignée à droite Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo conséquat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.

4. Aligner aucun

Les images auxquelles aucun alignement ne leur est attribué (en leur attribuant un alignement de «Aucun»), se trouveront exactement à l’endroit où vous les localisez – c’est-à-dire si vous choisissez de positionner une image affectée d’un alignement de «Aucun» dans un paragraphe de texte (voir l’exemple ci-dessous), il sera positionné en ligne avec ce texte, ce qui entraînera la présence de texte à la fois à gauche et à droite de l’image (en supposant que l’image n’est pas de la même largeur – ou plus large – que la zone dans lequel il se trouve **). Cependant, de manière confuse, une image qui a DEUX été assignée un alignement de «Aucun» ET se trouve dans son propre paragraphe (c’est-à-dire sur une nouvelle ligne dans l’éditeur WordPress et / ou spécifiquement dans les balises HTML «p») sera positionnée à gauche de la zone dans laquelle il réside (d’une manière similaire à celle qu’il aurait s’il avait été aligné à gauche) mais sans aucun texte à sa droite. Pourquoi? Parce qu’une image n’a pas d’alignement spécifique (ou, en termes techniques: pas de flottant gauche ou droit spécifique) qui se trouve dans son propre paragraphe (sans aucun autre élément dans le même paragraphe) sera séparé des deux précédents et en suivant le contenu par des lignes d’espaces blancs prédéfinis – de la même manière que tout autre paragraphe!

Exemple:

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Aucun aligner Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Alors qu’est-ce qui se passe réellement ici?

Pourquoi tout cela se produit-il? Tout cela est en fait dû à un langage informatique utilisé pour exprimer la présentation (mise en page, dimensions, couleurs, etc.) des éléments Web, connus sous le nom de feuilles de style en cascade – ou «CSS» pour faire court. Essentiellement, chaque fois que vous affectez, par exemple, un alignement à gauche à une image dans une publication ou une page, par exemple, WordPress ajoute un nom de classe HTML de “alignleft” à ladite image, ce qui force alors l’image à référencer un ensemble spécifique de commandes CSS prédéfinies qui lui indiquent où il doit se placer sur la page – simple! De même, pour chacun des autres alignements mentionnés, WordPress attribue des noms de classe différents – tels que ‘aligncenter’ (pour les images à aligner centralement), ‘alignright’ (pour les images à aligner à droite) et ‘alignnone’ (pour les images qui sont pour qu’aucun alignement particulier ne soit assigné) – que chacun référence différents ensembles de commandes CSS.

Certes (malheureusement), l’idée de faire le tour du monde des commandes CSS peut être plus que décourageante pour l’utilisateur moyen de WordPress; cependant, si vous souhaitez en savoir plus à leur sujet, ils vous permettront rapidement d’obtenir un tout nouveau degré de liberté en ce qui concerne le style de votre contenu – ou même de l’ensemble de votre site Web! Si vous êtes intéressé à apprendre, consultez notre article précédent sur la meilleure façon d’apprendre le CSS en ligne – ou, simplement, dirigez-vous vers le bon vieux Google et lancez-vous! 😉

Sommaire

Alors voilà: les alignements d’images expliqués! En bref: utilisez un alignement à gauche lorsque vous voulez qu’une image soit assise à gauche et que d’autres éléments (comme du texte, etc.) l’enroulent à droite; utilisez un alignement central lorsque vous souhaitez qu’une image se trouve au milieu / au centre de votre contenu sans aucun autre élément de chaque côté; utilisez un alignement à droite lorsque vous souhaitez qu’une image soit placée à droite et que d’autres éléments Web voisins l’enroulent à gauche; et utilisez un alignement de «aucun» si vous voulez que votre image soit exactement là où vous choisissez de la placer par rapport à ses éléments voisins (c’est-à-dire le texte, etc.) – ET enfin, si vous voulez qu’une image soit située à gauche du contenu -Zone dans laquelle il réside MAIS ne veut pas que du texte, etc. apparaisse à sa droite, attribuez à l’image un alignement de «Aucun» et assurez-vous qu’elle se trouve dans son propre paragraphe privé!

* via un menu déroulant situé en bas à droite de la fenêtre WordPress «Médiathèque», sous le sous-en-tête «Paramètres d’affichage des pièces jointes».

** auquel cas le texte qui se trouverait normalement de chaque côté de celui-ci n’aura nulle part ailleurs que d’aller au-dessus ou en dessous de l’image – notez que de tels cas peuvent souvent entraîner une confusion entre les quatre alignements car sans aucune place pour les autres texte / éléments de chaque côté de l’image, cela ne fera essentiellement aucune différence quel alignement vous choisissez d’utiliser!

Utile?

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me