[En attente de mieux :)]Centrer verticalement : débat & solutions

Bonjour à tous

Après quelques heures de recherches pour trouver une solution afin de centrer un div verticalement dans un autre, je me rend compte qu'il n'y a rien de très satisfaisant ...

Les pistes que j'ai pu trouver :

- Le bon vieux tableau passe partout : on s'en passerait bien !
- La propriété display:table-cell avec vertical-align. Ne fonctionne pas sous IE : Dommage
- La position absolute (50%) mais il faut connaitre la hauteur du div à centrer(margin:-div/2) : Pas évident quand on a du contenu dynamique variable ...
- Solution javascript : rien trouvé de convainquant, et vous ?

Voilà, je suis toujours en train de m'arracher les cheveux pour trouver une solution.

Et vous ? Comment faites-vous ?
Quelles techniques utilisez-vous ?

Et dans les temps à venir, est-ce que quelque chose est prévu pour remédier à ce problème (CSS & co)?

C'est quand même terrible de ne pas pouvoir centrer verticalement du contenu facilement dans un div !
Il y a 10ans, on le faisait avec les table, et aujourd'hui, rien n'est prévu avec les css.

J'ai du mal à comprendre ...
Modifié par sharky (27 Mar 2009 - 00:37)

Essaie ça j'ai mis des hauteur pour le test si tes contenu sont dynamique tu as juste à retirer les hauteurs. la marge de haut est spécifier en pourcentage si ta div fais 200 de hauteur alors la marge de haut seras tjr la moitié

<div id="conteneur">
   <div class="divv"></div>
</div>

*{
margin:0;
padding:0;
}


#conteneur{
width:500px;
height:600px;
position:relative;
}

.divv{
width:200px;
height:50px;
position:absolute;
top:50%;
}

j'ai fai sune erreur je crois je rectifie patiente

Si c'est bon j'ai tester ce code fonctionne trés bien pour tester tu fixe une hauteur a ton div conteneur.

<div id="conteneur">
   <div class="divv">ALSACREATIONS</div>
</div>

*{
margin:0;
padding:0;
}


#conteneur{
position:relative;
width:500px;
}

.divv{
width:200px;
position:relative;
top:50%
}

Modifié par tiesto95 (25 Mar 2009 - 14:19)

Bonjour,

C'est bien de participer, mais de cette façon, le div n'est pas du tout centrer dans la page ...

Salut,

Je pense que tu as cité les façons de faire les plus courantes, après, dans ton cas précis, il faut aussi se demander si ton conteneur doit avoir une hauteur fixe ou non. Si non, tu peux alors centrer verticalement le contenu en mettant un padding top et bottom identiques sur le conteneur :

<div style="padding:60px 7px;background:red">
   <p>Ici plein d'éléments en tout genre</p>
</div>

sharky a écrit :
- La propriété display:table-cell avec vertical-align. Ne fonctionne pas sous IE : Dommage

Hello,

En attendant que IE8 et display table se démocratisent, voilà ma méthode :
- j'essaye de convaincre le client de s'adapter au média : le Web n'est pas du print et a des contraintes d'affichage, notamment en ce qui concerne le centrage vertical
- j'opte pour une cellule de tableau, ce qui ne pose strictement aucun problème à partir du moment où c'est proprement réalisé.

Agylus > Ta méthode ne fonctionne pas avec un contenu dont la hauteur est variable.

Raph > Que veux-tu dire par 'UNE' cellule ?
Dans le cas d'un listing par exemple ... Tu crées autant de table avec une cellule qu'il y'a d'enregistrement à afficher ?

<div>
<table><tr><td>contenu</td></tr></table>
</div>

<div>
<table><tr><td>contenu</td></tr></table>
</div>

.
.
.

sharky a écrit :
Agylus > Ta méthode ne fonctionne pas avec un contenu dont la hauteur est variable.

Bien sûr que si, cf cette page.

Après comme je l'ai dit :

Agylus a écrit :
il faut aussi se demander si ton conteneur doit avoir une hauteur fixe ou non

Ha oui, je n'avais pas compris.
En effet ca fonctionne.

Mais la difficulté, c'est évidemment avec un div conteneur à hauteur fixe

Tu n'as pas 36 solutions en CSS pur et tu les as déjà citées.

Bon, on va attendre alors

bonjour,
un débat !?

l'alignement vertical ... est possible :
Entre deux element de type inline ou declaré inline-block.

sur un (ou groupe d'element) a l'interieur d'un autre element formater correctement en display:table-cell; ou d'une cellule de tableau. L'alignement vertical peut-etre perçu sitot que le contenant a une hauteur superieur au contenu.


L'alignement vertical peut-etre activer differement selon le contexte et les contraintes ...

Si formatage a la mode tableau , alors j'ai un truc qui s'epend ou se compresse , si formatage a la mode inline-block , j'ai un truc qui peut se centrer horizontalement ou passer sur plusieurs lignes ...

Commun entre tous : tableau , display:table et display:inline-block; ... : contexte de formatage modifié . (ou haslayout dans IE , excepté pour display:table qui n'est pas implementé dans les versions <8 ).

.. inline-block = contexte de formatage/haslayout = pas de difference catastrophique a gerer face au flottant = une certaine coherence entre IE et les autres .

Defaut , prevoir une alternative pour ff2 et inf (facilement gerable , suffit de prendre le temps de comprendre et voir ce que cela implique) et prevoir une alternative pour les elements de type block dans IE qui conservent malgré tout la caractéristique de block . (display:inline; (pour carateristique inline et zoom:1; pour le haslayout ).


... pour ne pas en mettre une platrée ici , je te propose de faire une recherche sur ce forum :
http://forum.alsacreations.com/search.php?mots=vertical-align&mt=all&fid=&type=posts&days=0&byname=gcyrillus&action=search

pis pour me joindre a tes questions : http://forum.alsacreations.com/topic.php?fid=9&tid=19203&s=est+ce+un+tableau+

Puis d'autre liens pour ajouté a tes pistes
http://yidille.free.fr/plux/valign/?14-float qui parle de ces 2 pages :

1) http://gcyrillus.free.fr/essai/boite_de_ouf.html de flottant vers table a inline-block avec centrage vertical in fine

2) variante de la boite de ouf enfin , juste les textes et les couleurs ... http://gcyrillus.free.fr/essai/testdroite-gauche-inline-block.html

menus :

http://yidille.free.fr/plux/valign/?5-lien-en-cellule-et-centrage-vertical
http://gcyrillus.free.fr/essai/boiteleien.html menu avec li en faux block , centrage X/Y des textes , puis une autre approche http://gcyrillus.free.fr/essai/valig.html
http://gcyrillus.free.fr/essai/menu-horizontal-multiligne-valign.html menu a centargae vertical multiligne (noté que le centrage horizontale est possible aussi et que la hauteur de ul peut-etre exprimé en min-height ...


Gabarits :

Selection de 5 gabarits debuggée pour IE ou FF>2 (table , display:table ; , display:inline-block; marge negative , centage absolu en marge automatiques .

http://yidille.free.fr/plux/valign/?004/Css-gabarits

http://gcyrillus.free.fr/gabarits/fausses_colonnes_extensibles_au_centre.html

Plus vieux comme exemple :
http://gcyrillus.free.fr//dkg/trucs_css/splash.html
http://gcyrillus.free.fr/essai/contenuOcentre.html un gabarit fluide parmis d'autres ...
http://gcyrillus.free.fr//trucs_css/test_valign_middle_block_inline.html
http://gcyrillus.free.fr//trucs_css/est-ce-un-tableau_.html ... page prise pour un troll , tentative naive de ma part d'obtenir quelques pistes et explications ...


et pourquoi pas un ptit tableau ?
http://gcyrillus.free.fr//trucs_css/centrons-un-site-sans-marges-negatives.html (2005 , juste pour info )
http://gcyrillus.free.fr/gabarits/2-col-centre-vertical-horizontal-bicolore.html
http://gcyrillus.free.fr/essai/puce-gauche-droite.html

Séries de "block" :

http://gcyrillus.free.fr/essai/test-centre-vertical-align.html serie de block contenant titre et paragraphes ...

une autre serie ? http://gcyrillus.free.fr/essai/test_valign_middle_block_inline_list_.html

une page qui traine depuis quelques années deja ... http://gcyrillus.free.fr/essai/v-align-midlle-block-tous.html

un petit pot pourri extrait d'un topic d'ici même ... http://gcyrillus.free.fr/essai/valign-texte-imageIE7.html

http://yidille.free.fr/plux/valign/?2-complement-vertical-align



display inline-block test visuels

une autre page test : http://gcyrillus.free.fr/essai/vertical_align_middle_block.html

http://yidille.free.fr/plux/valign/?19-inline-block-tout-navigateurs

......


En fait , avant display:table , il etait deja possible dans IE en mode quirk de faire du centrage verticale sans tableau avec au moins deux elements ....

GC