28111 sujets

CSS et mise en forme, CSS3

Image centrée verticalement avant un h2 avec ::before

Bonjour,

J'ai ajouté une icône en image avant mon h2 avec un pseudo-element. Celle-ci s'est alignée sur le bas de mon h2, j'aimerais la centrer dans la hauteur ou centrer verticalement le texte par rapport à cette image. Et surtout que ça se comporte correctement sur mobile.

upload/1539182032-50580-icon.jpg

Voici ma css :
.register h2::before {
content:url(/wp-content/uploads/2018/10/register.png);
}


Merci pour votre aide et bonne après-midi !
Administrateur
Hello,

Le centrage vertical avec Flexbox est assez simple et fonctionne parfaitement : 


.register h2 {
  display: flex;
  align-items: center;
}
.register h2::before {
content:url(/wp-content/uploads/2018/10/register.png);
}
Meilleure solution
Merci Raphael ! Il faut juste que je trouve la bonne classe car on dirait que c'est pas juste h2 car ça a bougé un peu mais ça n'est tjs pas bien centré
Administrateur
Newki75 a écrit :
Merci Raphael ! Il faut juste que je trouve la bonne classe car on dirait que c'est pas juste h2 car ça a bougé un peu mais ça n'est tjs pas bien centré

La règle que j'ai donnée centre verticalement le contenu du h2 ainsi que le ::before.

Si ce n'est pas "tout à fait" centré, cela peut provenir d'autre chose, par exemple :
- la hauteur de ligne (line-height) de l'un ou l'autre (tu peux tenter un line-height: 1 sur les deux éléments)
- une margin verticale sur l'un ou l'autre (que tu peux mettre à 0)
- l'image mal découpée qui pourrait avoir de l'espace en haut ou en bas
- etc.

Bonne chance Smiley smile
Sujet clos
Aller à