Centrer un DIV dans une fenêtre

**Tchupacabra** · 27/03/2009, 16h44

Bonjour à tous,

je cherche une méthode (= un script) me permettant de centrer verticalement et horizontalement un bloc HTML dans une page WEB.
Actuellement, je sais centrer mon élément par rapport à son parent.
Par contre, je sèche pour le centrer par rapport à la fenêtre, surtout lorsqu'il y a des blocs en position:absolute !
Voici mon code actuel (utilisant jQuery) :

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
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr">
<head>
 
<meta http-equiv="Content-Type" content="text/HTML; charset=utf-8" />
<meta http-equiv="Content-Script-Type" content="text/javascript" />
 
<title>Test align with jQuery</title>
 
<style type="text/css">
* {margin:0;padding:0;}
#boite {
	position: absolute;
	top: 150px;
	left: 250px;
	right:0px;
	bottom: 0px;
 
	/* cosmétique */
	background-color:#CCCCCC;
	padding:10px;
}
#cible {
	width:400px;
 
	/* cosmétique */
	border:1px solid red;
	text-align:justify;
	padding:6px;
	background-color:#999999;
	}
</style>
 
<script type="text/javascript" src="/js/jquery-1.3.2.min.js"></script>
 
<script type="text/javascript">
(function ($) {
 
	$.fn.vAlign = function() {
		return this.each(function(i){
			$(this).css("margin-top", "-" + $(this).outerHeight() / 2 + "px");
			$(this).css("top", "50%");
			$(this).css("position", "absolute");
		});
	};
 
	$.fn.hAlign = function() {
		return this.each(function(i){
			$(this).css("margin-left", "-" + $(this).outerWidth() / 2 + "px");
			$(this).css("left", "50%");
			$(this).css("position", "absolute");
		});
	};
 
})(jQuery);
 
$(document).ready(function(){
	$('#cible').hAlign();
	$('#cible').vAlign();
});
 
</script>
</head>
<body>
 
<div id="boite">
<div id="cible">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin vitae massa eu nulla mollis luctus. Sed sit amet diam sit amet magna dictum molestie. Vivamus nec erat. Nullam ac est molestie orci pretium faucibus. Donec est nunc, ultricies nec, volutpat id, bibendum a, metus. Integer malesuada purus euismod odio. Donec nisl turpis, fringilla vitae, dignissim sit amet, elementum vitae, eros. Integer sem ipsum, pretium sit amet, pharetra non, dictum ut, ante. Nulla malesuada quam convallis lectus. Phasellus dui augue, sollicitudin blandit, scelerisque eget, dignissim ac, tortor. Duis sed nunc. Vivamus molestie leo. Sed aliquam auctor nunc. Mauris lacinia. Donec gravida. Maecenas varius faucibus libero. Cras luctus ante tincidunt turpis. Praesent cursus viverra massa. Nunc leo dolor, condimentum et, faucibus in, fermentum sed, ipsum. Quisque mollis, nulla et pulvinar hendrerit, diam urna iaculis ipsum, ac tristique tortor ligula et elit.</div>
</div>
 
</body>
</html>

Help please...

Merci d'avance.

**jln13** · 27/03/2009, 17h24

salut,

tu ne devrais pas plutot utiliser innerHeight et innerWidth plutot que outerHeight et outerWidth ? (outerheight est la hauteur de tout le navigateur alors que innerheight est la hauteur de l'espace de travail de ton navigateur)

**Tchupacabra** · 27/03/2009, 17h43

pas avec jQuery

http://jquery.developpeur-web2.com/d...outerWidth.php :

outerWidth(options) retourne la largeur "extérieure" (inclue la bordure et le padding par défaut) pour le premier élément trouvé répondant à la sélection.
Cette méthode fonctionne pour les éléments visibles et non-visibles.

Paramètres:options (Options): (Optionnel) tableau clés/valeurs qui permet de configurer la méthode

Valeur de retour: Entier

Centrer un DIV dans une fenêtre

JavaScript

Vue hybride

Discussions similaires

Partager

Partager