Centrer un mon div verticalement

Invité · 07/04/2006, 14h23

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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>

**Davboc** · 07/04/2006, 14h44

l'astuce pour centrer un div est de lui donner les attributs css suivants :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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...

Invité · 07/04/2006, 14h46

je ne comrpends pas la signification de :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
margin-left:[[i]largeur/2[/i]
margin-top:[[i]hauteur/2[/i]

Qu'est-ce que c'est ?

Invité · 07/04/2006, 14h53

Quelqu'un a une solution que je comrends ?

**marsupix** · 07/04/2006, 14h54

par ex si ta div fait 500 de large et 400 de haut:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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

)

**Davboc** · 07/04/2006, 14h57

ah pardon c'est mal passé...

tu met

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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é !

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

Invité · 07/04/2006, 14h58

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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>

**Davboc** · 07/04/2006, 15h02

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...

**marsupix** · 07/04/2006, 15h03

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

EDIT2: le onmouseout="MM_swapImgRestore()" ça sent le dreamweaver ça beurk

Invité · 07/04/2006, 15h04

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 --

Invité · 07/04/2006, 15h16

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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

html

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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>

**marsupix** · 07/04/2006, 15h26

peut-être faudrait-il fixer la taille de ta div par width et height aussi....

Invité · 07/04/2006, 15h33

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.

**Tdeny** · 07/04/2006, 17h49

Et en faisant comme ça ?

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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">

**wyniwyg** · 07/04/2006, 18h16

je vous propose ceci :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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...

**Davboc** · 07/04/2006, 18h51

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

Invité · 12/04/2006, 10h05

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

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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 ?

**10-nice** · 12/04/2006, 10h11

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