Comment centrer verticalement un div avec du texte et une image sans flexbox ?

[roseblack]

Bonjour à tous,
Je travaille sur une page où je dois aligner verticalement un div contenant à la fois du texte et une image. Je préfère ne pas utiliser flexbox pour cette mise en page. J’ai essayé avec line-height et vertical-align,Retro Bowl mais ça ne fonctionne pas comme je le souhaite.
Quelqu’un pourrait m’expliquer une méthode simple pour centrer verticalement ce contenu en CSS classique ?

[samuel_dorian29]

Utilise display: table sur le parent et display: table-cell; vertical-align: middle sur le div enfant pour centrer verticalement.

[AlainPre]

Pourquoi ne veut tu pas utiliser de flex-box ?
Quelque chose comme ça :

Code : Tout sélectionner

<div class="flex">
   <div>texte et image</div>
</div>

Avec les styles suivants :

flex {
display:flex;
align-content:center;
}

C'est ce qu'il y a de plus simple je trouve.
Plus d'infos sur les flex:

[JulienR84]

Salut, sans flexbox il reste quand même une solution simple et propre : utiliser le vieux combo display: table / table-cell. Ça marche très bien et c’est encore largement supporté.

En gros, tu mets ton conteneur parent en display: table et ton div interne en display: table-cell avec vertical-align: middle. Comme une cellule de tableau, le contenu se centre tout seul, que ce soit du texte ou une image.

line-height marche surtout pour du texte sur une seule ligne, et vertical-align tout seul ne fonctionne que dans certains contextes (inline ou table-cell justement), donc normal que ça ne donne rien dans ton cas.

Si tu veux un truc simple, stable et sans flexbox, la méthode table-cell reste clairement la plus efficace.