Chaque jour, nous parcourons de nombreux navigateurs web pour notre travail, nos études ou nos loisirs. Il est incroyable de penser que les programmeurs peuvent offrir des possibilités infinies en matière de structure, de conception et de commandes grâce au langage HTML (HyperText Markup Language). Autant le contenu est essentiel dans un site web, autant l’inclusion de plusieurs images dans votre HTML peut faire ressortir votre programme. Si vous êtes un nouveau programmeur et que vous souhaitez apprendre à aligner horizontalement plusieurs images en HTML, ne vous inquiétez plus ! Dans cet article, nous allons énumérer les cinq façons d’aligner horizontalement plusieurs images en HTML.
Avant de vous présenter les 5 façons de faire, je voudrais remercier bolchevaerk.dk qui a contribué à la réalisation de cet article !
1. Flexbox
Le modèle flexbox ou boîte flexible est une méthode de mise en page relativement nouvelle qui permet aux programmeurs d’ajuster la structure de mise en page verticale ou horizontale d’un site web par le biais de lignes ou de colonnes. Vous pouvez modifier la longueur ou la largeur de l’image pour remplir ou rétrécir un espace donné dans la mise en page grâce au conteneur flexbox. L’utilisation de la boîte flexible permet également de prédire les proportions et l’emplacement d’une image en fonction de la taille de l’écran et du dispositif d’affichage de l’internaute.
Pour utiliser Flexbox afin d’aligner les images en HTML, voici horizontalement les étapes à suivre :
- Ouvrez un nouveau document HTML pour éviter de mélanger vos nouvelles commandes et codes avec le document principal.
- Insérez les images souhaitées dans le nouveau document. Comme vous utiliserez Flexbox, vous devez placer une div sous laquelle vous placerez « images-container ». Le nombre de
que vous incluez dépend du nombre d’images que vous voulez avoir dans la ligne horizontale.
- Incluez le CSS suivant dans votre HTML :
- Écrivez « images-container » et incluez les propriétés « display : flex ; » et « justify-content : center ; ». Comme nous l’avons déjà mentionné, Flexbox permet de prévoir l’ajustement d’une image proportionnellement à l’écran d’un appareil – c’est donc à cela que sert la propriété « display : flex ». Quant à « justify-content : center », il place toutes vos images encodées sur le site web au centre, horizontalement.
- Bien que facultatif, vous pouvez améliorer la présentation visuelle des images horizontales de votre site web en ajoutant la marge souhaitée pour chaque image. Pour ce faire, vous devez écrire un autre « images-container » et saisir « margin-left : », puis insérer le pixel ou la plage de px que vous avez choisi(e). Procédez de même pour la « marge-droite ». À titre de référence, 96 pixels équivalent à un pouce.
2 . Prevent Wrapping
L’une des choses les plus ennuyeuses auxquelles un programmeur, un concepteur ou même un étudiant est confronté lorsqu’il écrit sur un document comportant un texte qui doit insérer une image, c’est l’habillage. Le wrapping se produit lorsque le texte s’enroule autour d’images dans une position spécifique, faisant converger les deux éléments au lieu de placer initialement les images dans une position particulière. Dans le CSS de votre HTML, le wrapping se produit lorsqu’un texte s’ajuste automatiquement autour de l’image, déplaçant les mots ou l’image sur une ligne différente, empêchant l’alignement horizontal de vos multiples photos souhaitées. Pour éviter l’emballage, vous devez suivre les étapes suivantes :
- Sous l’élément principal #content, incluez le « whitespace:nowrap ». Nowrap supprime l’espace blanc typique de votre site web mais empêche les images de se détacher de ses lignes.
- L’alternative à « whitespace:nowrap » est « word-break:keep-all ». Cette solution fonctionne généralement pour l’habillage du texte, mais elle reste importante si vous avez du texte à côté de votre série d’images, ce qui peut affecter son alignement.
3. Méthode Display:inline-block
L’objectif premier de la propriété display:inline-block est de placer une image ou tout autre élément dans un bloc contenant qui se trouve au même niveau d’alignement que les autres éléments que vous y incluez. Une fois qu’une image se trouve dans cette propriété, vous pouvez encore ajuster ses valeurs de largeur et de hauteur tout en conservant son contenu adjacent. Cette propriété vous permet d’avoir plusieurs images horizontalement tant que vous les placez dans ces blocs d’affichage. Vous pouvez le faire en insérant « display:inline-block » dans votre code HTML.
4. Remplacez display:block par float:left
Le flottement est une propriété qui permet à votre image de se déplacer – généralement vers la gauche ou la droite – dans le conteneur dans lequel vous l’avez placée, ce qui fait que les textes s’enroulent autour d’elle (ce qui est ennuyeux). Si vous avez placé plusieurs images dans un conteneur sans préciser la direction dans laquelle elles doivent flotter, il y a de fortes chances que tous leurs alignements soient horizontaux. Pour éviter cela, vous devez soit
- Écrivez “<p style=” clear: both;”>
pour empêcher les textes suivants de s’enrouler ou de flotter sur les images qu’ils contiennent. Après cette opération, votre site web comportera une ligne horizontale invisible qui fera en sorte que toutes les nouvelles images ou tous les nouveaux textes commenceront par un paragraphe distinct.
- Inscrivez « float : left » dans la classe .images pour que son placement dans le conteneur commence par la gauche. Ce faisant, vous vous assurez que toutes les images suivantes suivront également leur alignement. Ainsi, vous verrez plusieurs photos dans un alignement horizontal dans votre HTML.
5. Vérifiez que le corps de l’élément est à 100 %.
Dans certains cas, plusieurs images ne peuvent pas être alignées horizontalement parce que la hauteur n’est pas de 100 %. Vous pouvez essayer d’écrire « margin 0 : auto » ou « text-align : center » sur vos images dans un élément bloc. Vous devez inclure l’un ou l’autre de ces textes sous la commande parent. Cependant, cette solution ne fonctionne pas dans tous les navigateurs, mais dans la plupart d’entre eux. Vous n’avez pas à vous inquiéter si votre navigateur HTML appartient à Microsoft Edge, Google Chrome, Opera ou Safari, car cette fonction fonctionne pour eux.
Si vous êtes à la recherche d’un excellent service de manipulation d’images, rendez-vous sur fixthephoto.com et voyez ce qu’ils peuvent faire avec vos images pour les rendre encore plus belles.
Ce qu’il faut retenir du guide : Comment aligner horizontalement plusieurs images en HTML
Vous pouvez transformer un site web « ennuyeux et défilant » en un site qui fait tourner les têtes en insérant des images qui attirent l’attention. Cependant, la création de votre site web peut vous prendre du temps car vous devez saisir de nombreux codes. Savoir comment aligner horizontalement plusieurs images en HTML peut être un avantage, que vous soyez un programmeur web passionné, un travailleur indépendant ou un concepteur web de longue date. Si tout va bien, après avoir appris les trois façons d’effectuer cette tâche, vous trouverez peut-être une solution plus facile ou plus compliquée que l’autre, et ce n’est pas grave. En tant que programmeur, vous devez suivre la procédure qui vous semble la plus efficace et la plus pratique, quelle qu’en soit la durée, tant que vous ne mettez pas en péril la qualité de votre travail.
Lisez aussi notre guide sur Comment effacer les données d’un formulaire après son envoi en HTML
