Placer le texte à côté de l'image en HTML

1. Utilisez la propriété CSS float pour placer le texte à côté d’une image en HTML
2. Utilisez display: inline-block et vertical-align: top pour placer le texte à côté d’une image en HTML

L’article explique comment placer du texte à côté des images en utilisant HTML et CSS.

Utilisez la propriété CSS float pour placer le texte à côté d’une image en HTML

Nous pouvons utiliser la propriété CSS float pour définir comment un élément peut flotter. Un élément peut flotter à droite ou à gauche. Certaines autres options sont none, ce qui signifie que l’élément ne flottera pas et inherit qui présentera le comportement de son parent. Nous utilisons la propriété float pour spécifier le positionnement et le formatage d’un élément. Nous pouvons également utiliser la propriété pour placer un texte à côté d’une image.

Nous pouvons facilement obtenir le style suivant en enveloppant à la fois le contenu de l’image et du texte avec un div. Le HTML doit être structuré comme ci-dessous.

<div>
    <div>
        <img src="url" />
    </div>
    <div>
        Text content goes here
    </div>
</div>

Maintenant que le HTML est structuré, nous pouvons ajouter notre CSS en ligne, interne ou externe. Pour cet exemple, nous allons implémenter les styles à l’aide de CSS en ligne. Tout d’abord, définissez la propriété float sur left pour le div enveloppant l’image. Utilisez l’URL https://loremflickr.com/320/240 comme source de l’image. Ensuite, écrivez n’importe quel texte de votre choix et enveloppez-le avec un autre div.

Exemple de code :

<div>
    <div style="float: left">
        <img src="https://loremflickr.com/320/240" />
    </div>
    <div>
        Text content goes here
    </div>
</div>

Ici, la propriété float: left est donnée au wrapper de l’image. La propriété float: left placera l’image à gauche, et un autre wrapper enveloppant le contenu du texte sera placé juste à côté de l’image. De cette façon, nous pouvons utiliser la propriété CSS float pour placer un texte à côté d’une image.

Utilisez display: inline-block et vertical-align: top pour placer le texte à côté d’une image en HTML

Nous pouvons utiliser les propriétés display et vertical-align pour placer un texte à côté d’une image en HTML. Le display définit comment un élément s’affiche en HTML. Nous pouvons définir la propriété d’affichage d’un élément comme inline, inline-block, block, etc. Lorsque nous affectons display à inline-block, cela fera de l’élément un élément en ligne, mais nous pouvons toujours définissez-lui les propriétés height et width. Ainsi, nous pourrons placer le texte à côté d’une image. La propriété vertical-align définit l’alignement vertical d’un élément. Lorsque nous utilisons la valeur top, l’élément sera aligné sur le haut de l’élément le plus haut de la ligne.

Ici, nous pouvons à nouveau structurer notre code comme ci-dessous.

<div>
    <img src="" alt="img"/>
</div>
<div>
    <p>
        Text Here,
    </p>
</div>

Par exemple, définissez la propriété display sur inline-block et la propriété vertical-align sur top pour le wrapper d’image div. Comme pour le wrapper, div du texte définit la propriété display sur inline-block.

Exemple de code :

<div style="display:inline-block;vertical-align:top;">
    <img src="https://loremflickr.com/320/240" alt="img"/>
</div>
<div style="display:inline-block;">
    <p>
    Here goes the text content.
    </p>
</div>

Ici, la propriété display: inline-block définit la propriété du wrapper qui enveloppe l’image d’une propriété inline-block. L’option inline-block n’ajoute pas de saut de ligne à côté de l’élément. Par conséquent, les éléments s’aligneront les uns à côté des autres. Nous enveloppons à nouveau le wrapper de texte avec la propriété display: inline-block également. Semblable à l’enveloppe précédente, il placera le contenu du texte juste à côté de l’image.