Discussion :

[Pgs]

Bonjour,
J’affiche des span qui se suivent en inline-block.
Certains contiennent une ligne et d’autres deux.
Ils ont tous la même hauteur donc ceux avec une seule ligne ne sont pas centrés verticalement.
J’ai vu que l’on pouvait résoudre le problème en insérant un span dans le span et en utilisant display:table pour le span extérieur et display:table-cell pour le span intérieur.
Ça marche, mais je perds le inline-block. Le display:table place chaque span sur une nouvelle ligne.
Avez-vous une solution pour centrer verticalement le contenu des span tout en affichant ces span sans retour à la ligne entre chacun d’eux ?
Merci d’avance

[Invité]

Bonjour,

Mets le display:table sur le parent (<div>) de tous les <span>.
Et display:table-cell sur les <span>, en vertical-align:middle.

Ou avec une flexbox.

[Pgs]

Merci beaucoup
Mais je veux que mes span :
- aient tous une même hauteur (par exemple 70px)
- aient tous une même largeur (par exemple 150px)
- se suivent sur une ligne (avec saut de ligne lorsqu’il n’y a plus de place pour les span suivants)
- aient leur texte centré verticalement (quel que soit le nombre de lignes dans chaque span)
Merci pour ton aide

[Sodium]

Si tu veux juste centrer les span les uns par rapport aux autres, un "vertical-align: middle;" sur les span devrait résoudre le problème.
Si tu veux en plus qu'ils soient centrés par rapport à leur conteneur, rajouter ça sur le conteneur :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
 
(selecteurContent)::before {
     content: "";
     display: inline-block;
     vertical-align: middle;
     width: 0;
     height: 100%;
}

[Invité]

Montre-nous tes codes HTML ET CSS.


On pourra te montrer comment faire.

[Pgs]

Merci
Mon code, c’est celui que tu m’as conseillé : des span en display:table-cell dans un div en display:table

Ta solution fonctionne très bien : dans chaque span, le texte est centré verticalement quelque soit le nombre de lignes qu’il prend dans le span.
Mais cette solution me fait perdre le comportement inline des span, qui se comportent du coup comme les td d’un table