Table-cell : écrasement horizontal du div

Auteur
Piteur511	# 20 Mar 2010 - 13:51:33
62 Posts	Bonjour. Pourquoi, quand j'applique "display: table-cell;" à un <div>, celui-ci s'écrase-t-il horizontalement ? J'ai beau préciser "width: 100%" ; ça ne change rien. Comment éviter ce problème ? Merci. PS : si j'ai mis "display: table-cell;", c'est que je voudrais utiliser "vertical-align: middle;" Modifié par Piteur511 (20 Mar 2010 - 13:51)
62 Posts
fvsch	# 20 Mar 2010 - 15:25:44
Administrateur 19942 Posts	Piteur511 a écrit : Pourquoi, quand j'applique "display: table-cell;" à un <div>, celui-ci s'écrase-t-il horizontalement ? Alors en détail: 1. tu as une série avec un seul élément en display:table-cell; 2. le navigateur va créer un conteneur «fictif» en display:table autour de ton élément en display:table-cell; 3. ce conteneur se comporte comme un tableau, c'est à dire qu'il prend la largeur de son contenu sauf s'il est en table-layout:fixed (pas le cas par défaut) ou s'il a une largeur explicite (width avec une valeur autre que "auto", ce qui n'est pas le cas par défaut); 4. tu ne peux pas contrôler directement ce conteneur en CSS; 5. ton DIV en display:table-cell prend 100% de la largeur de ce conteneur fictif, comme le ferait une cellule de tableau dans un tableau à une seule cellule, et si tu déclares explicitement un width:100% ça n'obligera pas pour autant le parent fictif à prendre toute la largeur du conteneur. Deux solutions: 1. Déclarer une largeur en pixels pour ton DIV en display:table-cell. 2. Ou bien avoir deux éléments imbriqués, le premier avec display: table; width: 100%;, et le deuxième avec display: table-cell; vertical-align: middle;. La hauteur dans laquelle tu veux centrer ton contenu peut être attribuée soit au «tableau», soit à la «cellule» (et on notera que, comme pour un tableau, elle agit comme une hauteur minimale et non pas une hauteur fixe). C’est ça, la puissance intellectuelle. Bac + 2, les enfants.
Administrateur 19942 Posts
Piteur511	# 20 Mar 2010 - 21:02:19
62 Posts	Florent V. a écrit : (...) Deux solutions: 1. Déclarer une largeur en pixels pour ton DIV en display:table-cell. 2. Ou bien avoir deux éléments imbriqués, le premier avec display: table; width: 100%;, et le deuxième avec display: table-cell; vertical-align: middle;. La hauteur dans laquelle tu veux centrer ton contenu peut être attribuée soit au «tableau», soit à la «cellule» (et on notera que, comme pour un tableau, elle agit comme une hauteur minimale et non pas une hauteur fixe). Limpide ! Merci beaucoup !
62 Posts