28173 sujets

CSS et mise en forme, CSS3

Centrer verticalement et horizontalement

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;
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
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)
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)
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)
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)
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
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)
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)
Comment t'a fait ca LOOOOL ?! Smiley bawling

Je cherche depuis sais pas cb de temps et toi tu me montre ca Smiley lol

Comment tu as fait ca stp ?!
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 Smiley cligne
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)
je me permet de remonter le topic car j'atta tjrs une réponse ...
Modifié par yoshio (28 Mar 2006 - 11:33)
Modérateur
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 Smiley smile
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 Smiley smile .

++
Sujet clos
Aller à