Comment correctement aligner des images en HTML ?

Réponses rédigées par Antoine

Dernière mise à jour : 2022-06-10 12:32:28

Question

Bonjour, j'ai plusieurs images à aligner sur une même ligne, tout en gardant des espaces entre les images. Comment faire pour correctement aligner des images en HTML ?

Réponse

La méthode la plus récente, pour aligner des images HTML, consiste à utiliser le module CSS des boîtes flexibles, dites flexbox.

<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title>Comment correctement aligner des images en HTML ?</title>
<style>
.aligner_images {
  display: flex;
  justify-content: space-between;
}
</style>
</head>  
<body>
<div class="aligner_images">
  <img src="https://via.placeholder.com/150?text=Image+01" alt=""> 
  <img src="https://via.placeholder.com/150?text=Image+02" alt="">
  <img src="https://via.placeholder.com/150?text=Image+03" alt="">
  <img src="https://via.placeholder.com/150?text=Image+04" alt="">
</div>
</body>
</html>

Remarque : La propriété flex permet d'aligner les images ; et la valeur space-between permet de répartir l'espace disponible de façon égale entre chaque images.

Vous trouverez d'avantage d'information, sur la manière d'aligner des images avec la méthode des boîtes flexibles, via cette page du site de Mozilla.