Centrer verticalement et horizontalement

Auteur
yoshio	# 14 Mar 2006 - 10:03:49
9 Posts	Bonjour, Je n'arrive pas a centrer une balise <div> de taille dynamique (aussi bien verticalement que horizontalement). J'ai trouver quelques sites pour centrer un bloc fixe mais ca ne marche aps du tout dans mon cas. Est ce que quelqu'un aurait un lien ou la solution ?! Voici pour l'instant le code css de ma balise : margin: auto; margin-top: 10px; position: relative; width: 90%; background-color: #A2C5E1;
9 Posts
Philippe	# 14 Mar 2006 - 10:12:56
690 Posts	bonjour, peut etre que tu traouveras sur ce site ce que tu cherche en modifiant legerement le code L'image en question, c'est la derniere en bas a droite regarde le code source
690 Posts
yoshio	# 14 Mar 2006 - 10:53:28
9 Posts	fixed Box totally centered Moi c'est dynamique. Mais j'ai essayer le code et ca marche qd même pas. Modifié par yoshio (14 Mar 2006 - 10:53)
9 Posts
Alan	# 14 Mar 2006 - 11:28:30
1014 Posts	Salut, C'est possible dans une cellule de tableau, avec l'alignement vertical. Pour réaliser cela, il faudrait donc un conteneur tableau à une cellule (100% de hauteur) avec {vertical-align: middle;} En mode standard, il faudrait d'abord définir une hauteur de 100% à html et body avant de donner une hauteur de 100% au tableau html, body { margin: 0; padding: 0; height: 100% } Modifié par Alan (14 Mar 2006 - 11:44)
1014 Posts
yoshio	# 14 Mar 2006 - 12:07:32
9 Posts	J'aimerais si possible ne pas utiliser de tableau. Tout mon site à été fait avec des div, p, ... C'est pas que j'aime pas les tableaux lol mais juste pour garder une certain cohérence. N'y a-til pas un moyen de centrer verticalement un block div ?! Si quelqu'un veux le code de ma page, demandez moi. NB: donner une taille height à body ne change rien du tt dans mon cas. Modifié par yoshio (14 Mar 2006 - 12:10)
9 Posts
Alan	# 14 Mar 2006 - 12:18:40
1014 Posts	Tu peux utiliser la propriété display pour avoir le même comportement qu'un tableau (et donc centrer verticalement par alignement). Sauf que ça ne marcherait pas avec Internet Explorer (qui ne supporte pas plusieurs plusieurs valeurs de display. ) Et avec "height: 100%" ça ne passerait de toute façon pas je crois (si je me rappelle bien de mes tests). A+ Modifié par Alan (14 Mar 2006 - 12:39)
1014 Posts
yoshio	# 14 Mar 2006 - 12:50:48
9 Posts	est ce que c'est un code comme ca au quel tu fais allusion : #page { display: table; vertical-align: middle; } Si oui ca ne fait pas grand chose lol
9 Posts
Alan	# 14 Mar 2006 - 13:06:09
1014 Posts	non, avec la valeur table-cell Par exemple #conteneur { display: table-cell; height: 600px; vertical-align: middle; } Bon courage Modifié par Alan (14 Mar 2006 - 13:06)
1014 Posts
yoshio	# 14 Mar 2006 - 17:06:55
9 Posts	Ouais ca marche mais ca me bazarde toute ma mise en page. Mais le problème c'est que ma page a un height dynamique donc je ne sais pas quel taiulle elle va prendre verticalement. Mon bloc principale est en position relative. Modifié par yoshio (14 Mar 2006 - 17:15)
9 Posts
Alan	# 14 Mar 2006 - 17:15:52
1014 Posts	j'ai bien compris... Modifié par Alan (14 Mar 2006 - 17:28)
1014 Posts
yoshio	# 14 Mar 2006 - 22:58:10
9 Posts	t'a bien compris koi ?!
9 Posts
Christian Le Bouler	# 14 Mar 2006 - 23:24:49
3109 Posts	Bonjour, s'il s'agit d'un conteneur global je me suis amusé à çà : http://clb56.freezee.org/test_center.html pas très sérieux mais bon Modifié par clb56 (14 Mar 2006 - 23:25)
3109 Posts
yoshio	# 15 Mar 2006 - 07:26:40
9 Posts	Comment t'a fait ca LOOOOL ?! Je cherche depuis sais pas cb de temps et toi tu me montre ca Comment tu as fait ca stp ?!
9 Posts
Christian Le Bouler	# 15 Mar 2006 - 09:39:04
3109 Posts	Salut, la css est dans le <head> du code source. j'ai tout simplement vérifié de manière empirique plusieurs propriétés css. avec #conteneur_global { height:x%; } alors #conteneur_global { position:relative; top: ((100-x)/2)%; } fonctionne, tout bêtement (avec body et html à 100% évidemment). Le coté pas sérieux de tout ça, c'est ce conteneur qui veut devenir calife à la place du calife. c'est à dire scrollant à la place du scroll du body dont c'est le boulot par rapport au fait qu'une page internet est un media paginé et pas un écran de télévision
3109 Posts
yoshio	# 15 Mar 2006 - 17:22:58
9 Posts	il faut savoir la valeur du x non ?! dans le cas ou c dynamique comment tu la sait ?! Modifié par yoshio (15 Mar 2006 - 19:05)
9 Posts
yoshio	# 28 Mar 2006 - 11:31:55
9 Posts	je me permet de remonter le topic car j'atta tjrs une réponse ... Modifié par yoshio (28 Mar 2006 - 11:33)
9 Posts
gcyrillus	# 28 Mar 2006 - 23:04:33
1232 Posts	salut, le centrage verticale horizontale, verticale peut se faire a l'aide des marges negatives (voir la faq d'alsacreationS), ensuite le display table , n'a pas vraiment d'equivalent dans IE pour ce comportement avec plusieurs balises de type block sans faire usage d'un veritable tableau . si il s'agit de toute la page la seule solution qui fonctionne pour tout les navigateurs c'est : un tableau avec une seule cellule qui continet ta page : http://gcyrillus.free.fr/trucs_css/centrons-un-site-sans-marges-negatives.html .... tu retrouveras cette reponse a divers endroit sur le web. pour le display table ou inline avec vertical align:middle pour IE: tu peut faire ça , mais tu n'aura droit qu'a une ligne http://gcyrillus.free.fr/trucs_css/splash.html tu remarqueras que le deuxieme essai est plutot "lourd" (au sens normal et figuré) au niveau css et que le resultat final est restrictif., l'option du tableau aurait étè bien plus facile a mettre en oeuvre . ++ Mes quelques resources sur la mise en forme : http://yidille.free.fr/plux/valign : trés fouillis et en français plus que moyen
1232 Posts

Les références web : openweb.eu.org - opquast.com - webmaster-hub.com - webrankinfo.com - salemioche.net - web-pour-tous.org - webonorme.org

Nos partenaires : Editions Eyrolles