CSS : img vertical-align dans un paragraphe |
Bienvenue invité ( Connexion | Inscription )
CSS : img vertical-align dans un paragraphe |
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 : 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 |
|
|
24 Apr 2019, 15:44
Message
#2
|
|
Macbidouilleur d'Or ! Groupe : Membres Messages : 4 821 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
|
|
|
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
Ce que je voudrais, c'est que les deux lignes soient centrées sur l'images. C'est possible ça ? |
|
|
24 Apr 2019, 20:47
Message
#4
|
|
Macbidouilleur d'Or ! Groupe : Membres Messages : 4 821 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
|
|
|
Nous sommes le : 19th April 2024 - 12:49 |