Centrer un mon div verticalement

Version imprimable

Voir 40 message(s) de cette discussion en une page

J'ai une balise div avec une image dedans et j'aimerais centrer verticalement le div. J'ai aucune idée de comment m'y prendre. Voilà mon code :

Code:

1
2
3
4
5
6
7
8
9
10
11
<div align="center" valign="middle">
			<a href="page.php" onmouseout="MM_swapImgRestore()" 
 
onmouseover="MM_swapImage('Entrer','','images/index2.gif',1)">
 
				<img src="images/index1.gif" alt="Entrer" name="Entrer" border="0" id="Entrer" />
 
			</a>
			<br/><br/><br/>
			<img src="http://easygiga.ch/imagesbanner/banner145_55_offert.gif" alt="easygiga" border="0" />
		</div>

07/04/2006, 13h44
Davboc
l'astuce pour centrer un div est de lui donner les attributs css suivants :
Code:

1 2 3 4 left:50%; top:50%; margin-left:[[i]largeur/2[/i] margin-top:[[i]hauteur/2[/i]
ca marche bien comme ça normalement...
07/04/2006, 13h46
Invité
je ne comrpends pas la signification de :
Code:

1 2 margin-left:[[i]largeur/2[/i] margin-top:[[i]hauteur/2[/i]
Qu'est-ce que c'est ?
07/04/2006, 13h53
Invité

Quelqu'un a une solution que je comrends ?
07/04/2006, 13h54
marsupix
par ex si ta div fait 500 de large et 400 de haut:
Code:

1 2 3 4 5 6 7 8 div{ position:absolute; left:50%; top:50%; margin-top:-200px; margin-left:-250px; }
(il y a un bouton "éditer" pour éviter les doubles post ;) )
07/04/2006, 13h57
Davboc
ah pardon c'est mal passé...

tu met
Code:

1 2 margin-left:- [largeur de ton div/2]px; margin-top:- [hauteur de ton div/2]px;
en remplacant ce qui est entre crochet par les valeurs...

en fait ca place l'arete superieure droite de ton div au milieu de l'écran (les 50%) et ça le décale ensuite pour que ça soit le milieu de ton div qui soit au milieu de l'écran...

ne pas oublier position:absolute; aussi

[edit]
doublé ! :P

Et rien n'empêche d'être aimable et un minimum patient... :?

C'est génial !!!! mais sa marche pas du tout.
je veux que mon div soit aligné au centre de la page (horizontalement et verticalement). Dans le div il y a une image (566 x 104).
J'ai mis sa comme code. le css :
Code:

1 2 3 4 5 6 7 8 .index { position:absolute; left:50%; top:50%; margin-top:283px; margin-left:52px; }
et le div
Code:

1 2 3 4 5 6 7 <div class="index"> <a href="page.php" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Entrer','','images/index2.gif',1)"> <img src="images/index1.gif" alt="Entrer" name="Entrer" border="0" id="Entrer" /> </div>

07/04/2006, 14h02
Davboc

Ca t'écorcherai d'être un minimum aimable ? on est pas à ton service ! On vient de te donner la solution alors réfléchis un minimum par toi meme... Tu veux pas qu'on le fasse ton site non plus ?

En 2 minutes tu n'as pas eu le temps de tester correctement alors prends au moins une demi heure pour chercher les bugs que t'as mis et après tu viens demander de l'aide si tu trouve pas...
07/04/2006, 14h03
marsupix

C'est exactement ce qu'a mis davboc (mais avec les margin en négatif ;) )

position:absolute;
left:50%;
top:50%;
>> ça va mettre le coin supérieur gauche de ta div au milieu de l'écran
puis
margin-left:-(la largeur de la div / 2); // à ne pas taper mais à calculer !
margin-top:-(la hauteur de la div / 2); // idem
et là on rédécale la div horizontalement et verticalement de la moitié de sa taille... on peut pas faire plus clair lol

EDIT: LOL :lol:
EDIT2: le onmouseout="MM_swapImgRestore()" ça sent le dreamweaver ça beurk
07/04/2006, 14h04
Invité

je vous demande pardon. je me suis emporté. Mais qu'est-ce que c'est embêtant quand sa marche pas. je suis désolé

Ouais dreamweaver est un peu la derriere mais je savais pas comment faire.

-- édité par franculo_caoulene : on a tous ce genre de sensation --

Désolé d'encore insister mais ça ne fonctionne toujours pas. L'image est alignée en haut à droite dans mon navigateur et je ne comprends pas. Mon code est pourtant identique à celui que vous m'avez donné :

CSS
Code:

1 2 3 4 5 6 7 8 .index { position:absolute; left:50%; top:50%; margin-top:-283px; margin-left:-52px; }
html
Code:

1 2 3 4 5 6 <div class="index"> <a href="page.php" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Entrer','','images/index2.gif',1)"> <img src="images/index1.gif" alt="Entrer" name="Entrer" border="0" /> </a> </div>

07/04/2006, 14h26
marsupix

peut-être faudrait-il fixer la taille de ta div par width et height aussi....
07/04/2006, 14h33
Invité

j'ai déjà essayé cette variante mais sans résultat. Je ne comprends pas ce qui ne fonctionne pas. Le code à pourtant l'air correct.

Et en faisant comme ça ?

Code:

1
2
3
4
5
6
7
8
9
10
 
<script type="text/javascript">
posX=Math.ceil((screen.availWidth - 566)/2);
posY=Math.ceil((screen.availHeight - 104)/2);
 
document.write("<style id='st0' type='text/css'>");
document.write("#index {display:inline;position:absolute; top:"+posY+"px; left:"+posX+"px;width:566px;height:104px;}");
document.write("</style>");
</script>
<div id="index">

je vous propose ceci :

Code:

1
2
3
4
5
6
7
8
9
10
 
<script language="javascript">
var hauteur_utile = document.body.clientHeight; 
var largeur_utile = document.body.clientWidth;
var image_haut = 104;
var image_larg = 566;
var pos_haut = (hauteur_utile - image_haut)/2;
var pos_larg = (largeur_utile - image_larg)/2;
document.write("<div style='background:red;position:absolute;top:"+pos_haut+";left:"+pos_larg+";'><img src='http://aldehan.free.fr/perso/sms080yp.gif'></div>");
</script>

en espérant que cela réponde à la question...

07/04/2006, 17h51
Davboc

c'est quand meme bizarre que ça marche pas ,c'est la technique que j'utilise souvent sur mon site... :?

J'ai changé de technique et j'ai mis un tableau à la place d'un div.

Code:

1
2
3
4
5
6
7
8
9
10
11
<table border=0 width="100%" height="100%" align="center">
			<tr>
				<td align="center" valign="middle">
 
					<a href="page.php" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Entrer','','images/index2.gif',1)">
 
						<img src="images/index1.gif" alt="Entrer" name="Entrer" border="0" id="Entrer" />
					</a>
				</td>
			</tr>
		</table>

Le truc c'est que cela fonctionne seulement si j'enlève mon doctype

Code:

1
2
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

Quelqu'un peut m'expliquer pourquoi ?

12/04/2006, 09h11
10-nice

Bien compliqué tout ca alors que la simple utilisation d'un vertical-align solutionnerait le pb il me semble

http://www.w3schools.com/css/pr_pos_vertical-align.asp
12/04/2006, 09h14
Invité

Non car si je remets le doctype c'est le height=100% qui ne marche pas.
12/04/2006, 09h39
10-nice

et tu a essayé d'ecrire "correctement" ton style?

style="width:100%;height:100%;text-align:center;"

Voir 40 message(s) de cette discussion en une page