Comment aligner verticalement du texte à côté d'une image ?

Lucas D. - July 19, 2024

Problème : Alignement vertical du texte avec les images

Placer du texte à côté d'une image peut causer un mauvais alignement, le texte commençant en haut de l'image. Cela peut rendre la mise en page déséquilibrée, surtout lorsque la hauteur de l'image diffère de celle du texte.

Solutions CSS pour l'alignement vertical du texte

Utilisation de la propriété Vertical-Align

La propriété vertical-align peut aligner verticalement du texte à côté d'une image. Appliquez cette propriété à l'élément image, pas au texte. Définissez vertical-align: middle sur l'image pour obtenir l'alignement :

<div>
  <img style="vertical-align: middle" src="image.jpg" alt="Image">
  <span>Texte aligné avec l'image</span>
</div>

Cette méthode fonctionne car l'image est un élément en ligne, et vertical-align affecte sa position par rapport aux autres éléments en ligne. Appliquer vertical-align à l'élément texte ne fonctionne souvent pas comme prévu, car cela n'affecte que la position de l'élément par rapport à sa propre boîte de ligne.

Exemple: Utilisez Line-Height pour un réglage fin

Lors de l'utilisation de vertical-align, vous pouvez affiner l'alignement en ajustant la line-height du conteneur parent. Cela peut aider à obtenir un alignement parfait dans certains cas :

.container {
  line-height: 1.5;
}

Méthode Flexbox pour l'alignement vertical

Flexbox offre une solution fiable pour l'alignement vertical. Pour utiliser cette méthode :

Appliquez display: flex à l'élément parent pour créer un conteneur flexible.
Utilisez la propriété align-items pour centrer le contenu verticalement.

Voici un exemple :

.container {
  display: flex;
  align-items: center;
}

<div class="container">
  <img src="image.jpg" alt="Image">
  <span>Texte aligné avec l'image</span>
</div>

Cette approche permet de centrer verticalement plusieurs éléments dans le conteneur, quelle que soit leur taille. Elle vous donne également plus de contrôle sur la mise en page et l'espacement entre les éléments.

Approches Alternatives pour l'Alignement Vertical du Texte

Technique de Mise en Page avec Grid

La mise en page CSS Grid offre une autre façon d'aligner verticalement le texte avec les images. Pour utiliser cette méthode :

Créez un conteneur grid :

.grid-container {
display: grid;
grid-template-columns: auto 1fr;
gap: 10px;
}

Alignez les éléments dans les cellules de la grille :
```
.grid-container {
align-items: center;
}
```

Cette technique permet un contrôle précis de la mise en page et fonctionne bien pour des arrangements complexes.

Exemple: Zones de Modèle de Grille pour des Mises en Page Complexes

Utilisez grid-template-areas pour créer des mises en page plus complexes avec des zones de grille nommées :

.grid-container {
  display: grid;
  grid-template-areas: 
    "image heading"
    "image description";
  gap: 10px;
}
.image { grid-area: image; }
.heading { grid-area: heading; }
.description { grid-area: description; }

Cela permet un positionnement flexible des éléments dans la grille.

Méthode de la Hauteur de Ligne

La méthode de la hauteur de ligne est une approche simple qui peut fonctionner dans certains cas :

Définissez la hauteur de ligne du conteneur pour correspondre à la hauteur de l'image :

.container {
line-height: 60px; /* Changez pour correspondre à la hauteur de votre image */
}

Appliquez l'alignement vertical à l'image :
```
.container img {
vertical-align: middle;
}
```

Avantages de cette méthode :

Facile à mettre en œuvre
Fonctionne bien pour le texte sur une seule ligne

Inconvénients de cette approche :

Moins flexible pour le texte sur plusieurs lignes
Nécessite la hauteur exacte de l'image
Peut nécessiter des ajustements pour différentes tailles d'écran

Bien que ces méthodes puissent être utiles dans des cas spécifiques, elles peuvent ne pas être aussi polyvalentes que les approches flexbox ou vertical-align pour une utilisation générale.