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

[Invité]

flexbox, en flex-wrap:wrap.

[Pgs]

Merci pour ton aide, mais je dois mal m'y prendre :

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
div #mondiv {
	display: flex;
	flex-wrap: wrap;
}
.monspan {
	width: 200px;
	height: 54px;
	display: inline-block;
	vertical-align: middle;
}
<div id="mondiv"><span class="monspan" id="monspan1">Texte court</span><span class="monspan" id="monspan2">Texte long nécessitant deux lignes</span></div>
...

La hauteur de 54px est adaptée à l'affichage sur 2 lignes :
=> le second span est nickel car le texte à l'intérieur prend deux lignes
=> mais dans le premier span, le texte ne prend qu'une seule ligne et n'est du coup pas centré verticalement

[Invité]

• A Complete Guide to Flexbox
• Flexbox

Autant mettre des <div> :

Code html :

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

1
2
3
4
5
6
7
<div class="divflex">
  <div>Texte court</div>
  <div>Texte long nécessitant deux lignes</div>
  <div>autre Texte court</div>
  <div>ce Texte est le plus long et nécessite plus de deux lignes au moins</div>
  <div>...</div>
</div>

Code css :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
.divflex {
	display: flex;
	flex-wrap: wrap; /* passage à la ligne possible */
  justify-content:flex-start; /* ou center, ... */
  align-items:center; /* pour centrer verticlament les span */
}
.divflex > div {
	width: 200px;
  height:54px;
	flex:0 0 auto;
  display: flex; align-items:center; /* pour centrer verticlament les textes dans les span */
  border:1px solid #ccc;
}

[Pgs]

Je te remercie beaucoup, c'est le top !
Juste deux questions :
1- pourquoi me conseilles-tu les div plutôt que les span ?
2- L'utilisation div / span me permettait de distinguer facilement le conteneur de ses enfants grace au type. Est-ce que le ">" que tu utilises sert à cela ?
Merci encore
Philippe

[Invité]

Bonjour,

1- Par défaut,

• <span> est inline,
• <div> est block.

Ici, on a plutôt un comportement de block.
Mais bon. C'est juste une question de point de vue.
Les 2 balises sont sémantiquement neutres.

2- le chevron ">" signifie "enfant direct".

[Pgs]

Merci

[Pgs]

J'ai juste un petit problème : alors que dans tous mes DIV, le texte est désormais bien centré verticalement (quel que qoit le nombre de lignes qu'il prend), il n'est centré horizontalement que s'il prend au moins deux lignes. Le texte ne prenant qu’une seule ligne est aligné à gauche dans son DIV.

Code HTML :

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

1
2
3
4
 <div>Texte long nécessitant deux lignes</div>
  <div>autre Texte court</div>
  <div>ce Texte est le plus long et nécessite plus de deux lignes au moins</div>
  <div>...</div>

[Invité]

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
.divflex {
  display: flex;
  flex-wrap: wrap; /* passage à la ligne possible */
  justify-content:flex-start; /* ou center, ... */
  align-items:center; /* pour centrer verticalement les span */
}
.divflex > div {
  width: 200px;
  height:54px;
  flex:0 0 auto;
  display: flex; 
  align-items:center; /* centrage vertical des textes */
  justify-content:center; text-align:center; /* centrage horizontal des textes */
  border:1px solid #ccc;
}

[Pgs]

Merci, c'est parfait !

[Pgs]

Bonjour jreaux62,
J'essaye d'adapter ta solution à un autre cas :
Dans un TD avec height=40px, j'ai une balise

Code :

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

<a> { display: block; width: 100%; height: 100%; line-height: 20px;vertical-align: middle;}

La balise <a> prend bien toute la hauteur du TD et le line-height: 20px est parfait lorsque le texte du <a> prend deux lignes. Mais lorsqu'il ne prend qu'une seule ligne, il est aligné en haut du <a> malgré le vertical-align: middle.
Faut-il ici aussi passer par du display:flex au niveau du <TD> et du <a> ?
Merci d'avance pour ta nouvelle aide

[Invité]

Bonjour,

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
table td {
  width: 150px; /* TEST : à supprimer */
  height: 45px;
  border: 1px dashed grey;
  padding: 0;
  text-align:center;
  vertical-align: middle; 
}
table td a {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  background: yellow; /* TEST : pour visualiser */
}

[Pgs]

Impec !
Ça fontionne parfaitement.
Merci !!