Aïe centrage vertical

**epona1** · 27/04/2008, 02h00

Bonjour
J'ai utilisé le script suivant pour centrer ma fenêtre

Code :

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

<div align="center"><img src="ImIndex.jpg" width="800" height="600" /></div>

ça marche horizontalement, mais pas verticalement. La fenêtre reste scotchée en haut de page.

J'ai cherché un temps fou sur le web, trouvé des scripts qui ne marchent pas ou que je ne sais pas comment insérer (où ça se met, quelles corrections apporter au texte pour l'adapter à mon cas,...). J'ai fait des tonnes d'essais, pas flop total et désespérant.

Quelqu'un de gentil pourrait-il me dire PRECISEMENT ce qu'il faut faire pour que ma fenêtre se place en plein milieu de l'écran ?

**Auteur** · 27/04/2008, 12h22

bonjour,

avec

Code css :

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

1
2
 
margin: auto

**splifferwolf** · 27/04/2008, 14h33

margin: auto ne marche pas pour le vertical

CSS

Code :

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

1
2
3
4
5
6
7
8
9
10
11
 
div#container{
background:lightblue;
width:800px;
height:600px;
top:50%;
left:50%;
position:absolute;
margin-top:-300px;
margin-left:-400px;
}

HTML

Code :

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

1
2
 
<div id="container"><img src="ImIndex.jpg" width="800" height="600" /></div>

Il faut donner une position absolue; et un width & height au div, ensuite tu l'align à 50% du haut et du bord gauche et tu met un margin négatif équivalent à la moitier de la hauteur pour margin-top et la motier de la largeur pour margin-left du div et hop ton div est aligner horizontalement et verticalement

Voili voilou

**epona1** · 27/04/2008, 20h43

Ah la la ! Galère de misère de malheur de chkoumoune !!! Ca ne fonctionne pas.

Qu'est-ce que j'ai encore fait de mal ?

Pourtant j'ai essayé vos codes placés à différents endroits.

Voici tout le code de ma petite page

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<title>Document sans nom</title>
<style type="text/css">
<!--
body {
	background-image: url(ArrBleu.jpg);
	background-repeat: no-repeat;
}
-->
</style></head>
 
<body>
<div align="center"><img src="ImIndex.jpg" width="802" height="601" />
</div>
</body>
</html>

Que dois-je faire, Docteurs ?

NB : je suis sur Dreamweaver, sur Mac OsX

**splifferwolf** · 27/04/2008, 21h21

essaye ca

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<title>Document sans nom</title>
<style type="text/css">
body {
	background-image: url(ArrBleu.jpg);
	background-repeat: no-repeat;
}
#container{
        background:lightblue;
        width:802px;
        height:601px;
        top:50%;
        left:50%;
        position:absolute; 
        margin-top:-300px;
        margin-left:-401px;
}
</style></head>
 
<body>
<div id="container"><img src="ImIndex.jpg" width="802" height="601" />
</div>
</body>
</html>

**epona1** · 28/04/2008, 20h14

ça marche !!!!!

You are the best !!!

Aïe centrage vertical

JavaScript

Vue hybride

Discussions similaires

Partager

Partager