IPB

Bienvenue invité ( Connexion | Inscription )

 
Reply to this topicStart new topic
> CSS : img vertical-align dans un paragraphe
Options
clarusad
posté 24 Apr 2019, 13:44
Message #1


Macbidouilleur de bronze !
**

Groupe : Membres
Messages : 309
Inscrit : 17 Oct 2006
Lieu : Strasbourg, France
Membre no 70 694



Salut,
Comment éviter ceci :
Fichier joint  Capture_d_____cran_2019_04_24____14.39.54.jpg ( 15.61 Ko ) Nombre de téléchargements : 8


Code
img { vertical-align:middle }


Pourquoi entre la première ligne et la seconde il y a tant d'espace ?
Merci
Go to the top of the page
 
+Quote Post
scoch
posté 24 Apr 2019, 15:44
Message #2


Macbidouilleur d'Or !
*****

Groupe : Membres
Messages : 4 803
Inscrit : 1 Jul 2010
Membre no 156 073



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.


--------------------
L'homme n'est que poussière... c'est dire l'importance du plumeau ! Alexandre Vialatte
Go to the top of the page
 
+Quote Post
clarusad
posté 24 Apr 2019, 20:03
Message #3


Macbidouilleur de bronze !
**

Groupe : Membres
Messages : 309
Inscrit : 17 Oct 2006
Lieu : Strasbourg, France
Membre no 70 694



Oui mais non rolleyes.gif

Ce que je voudrais, c'est que les deux lignes soient centrées sur l'images.
C'est possible ça ?
Go to the top of the page
 
+Quote Post
scoch
posté 24 Apr 2019, 20:47
Message #4


Macbidouilleur d'Or !
*****

Groupe : Membres
Messages : 4 803
Inscrit : 1 Jul 2010
Membre no 156 073



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>


Ce message a été modifié par scoch - 24 Apr 2019, 21:39.


--------------------
L'homme n'est que poussière... c'est dire l'importance du plumeau ! Alexandre Vialatte
Go to the top of the page
 
+Quote Post

Reply to this topicStart new topic
1 utilisateur(s) sur ce sujet (1 invité(s) et 0 utilisateur(s) anonyme(s))
0 membre(s) :

 



Nous sommes le : 29th March 2024 - 06:26