0
votes

hauteur du texte par rapport à une image

Je ne peux pas mettre le texte au milieu de l'image avec laquelle il se trouve.
Voici ce que j'écris dans le HTML:

#languages {
   display: grid;
   grid-template-columns: repeat(4, 1fr);
   font-size: 22px;
   gap: 30px;
   padding: 20px 0 0 0;
}

Voici ce que j'écris dans le CSS:

.languagesIcons {
   width: 55px;
   margin: 0 10px 0 0;
}

Tout cela s'exécute dans un <div> dont son CSS est:

<p><img class="languagesIcons" src="img/x.png">x</p>

html css

1 commentaires

Ecrit dans la première ligne ..., je veux mettre le texte à mi-hauteur de la photo.

3 Réponses :

0
votes

Pour aligner verticalement le texte et l'image, utilisez:

<p>
    <img class="languagesIcons" src="img/x.png" style="vertical-align: middle;" >
    <span style="vertical-align: middle;" >x</span>
</p>

0 commentaires

1
votes

Vous devez utiliser position:absolute sur l'image et le texte placé dans un span par exemple et utiliser position:relative sur le conteneur qui est ici la balise ap. Ensuite, vous pouvez ajuster sa position avec transform:translateY() par exemple. Voir le code ci-dessous:

<div><p><img class="languagesIcons" src="img/x.png"><span>x</span></p></div>

p{
position:relative
}

.languagesIcons {
   width: 55px;
   margin: 0 10px 0 0;
   position:absolute
}
div{
   display: grid;
   grid-template-columns: repeat(4, 1fr);
   font-size: 22px;
   gap: 30px;
   padding: 20px 0 0 0;
}
span{
position:absolute;
transform:translateY(50%)
}

1 commentaires

Pour être honnête, je n'avais besoin que du span + css que vous avez fait, merci beaucoup ♥

1
votes

Vous pouvez simplement ajouter vertical-align: middle à votre classe languageIcons:

.languageIcons{
width:55px;
margin: 0 10px 0 0;
vertical-align:middle;
}

0 commentaires