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