Version imprimable du sujet

Cliquez ici pour voir ce sujet dans son format original

Forums MacBidouille _ Les Langages Du Web _ CSS : img vertical-align dans un paragraphe

Écrit par : clarusad 24 Apr 2019, 13:44

Salut,
Comment éviter ceci :

Code

img { vertical-align:middle }

Pourquoi entre la première ligne et la seconde il y a tant d'espace ?
Merci

Écrit par : scoch 24 Apr 2019, 15:44

Parce qu'un élément img est un élément inline. L'image est sur la même ligne que le texte qui la suit et tu as réglé l'alignement vertical sur middle. Avec vertical-align: baseline (par défaut) tu retrouverais la hauteur de ligne normale, et l'image serait alignée sur la ligne de base.

Écrit par : clarusad 24 Apr 2019, 20:03

Oui mais non

Ce que je voudrais, c'est que les deux lignes soient centrées sur l'images.
C'est possible ça ?

Écrit par : scoch 24 Apr 2019, 20:47

Tu passes l'image en flottant à gauche. Tu lui attribues une hauteur de deux hauteurs de ligne. Et une marge à droite.

Code

body {
    font-size: 16px;
    line-height: 1.5;
}
img {
    float: left;
    height: 3em;
    width: auto;
    margin-right: .5em;
}

<img src="image.jpg">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>

Ou alors si tu préfères contraindre la largeur, tu passes l'image et le paragraphe en inline-block.

Code

.image,
.texte {
    display: inline-block;
    vertical-align: middle;
}
.image {
    width: 3em;
    height: auto;
    margin-right: .5em;
}
.texte {
    /* 3.5em = width + margin-right de l'image */
    width: calc(100% - 3.5em);
}

<img class="image" src="image.jpg"
><p class="texte">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt.</p>

Et si l'image et le paragraphe sont dans une boîte, tu peux utiliser le module flexbox.

Code

body {
    font-size: 16px;
    line-height: 1.5;
}
.conteneur {
    display: flex;
    align-items: center;
}
.conteneur img {
    display: block;
    height: 3em;
    width: auto;
    margin-right: .5em;
}

<div class="conteneur">
    <img src="image.jpg">
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
</div>

Propulsé par Invision Power Board (http://www.invisionboard.com)
© Invision Power Services (http://www.invisionpower.com)