Bonjour,
Je souhaiterai centrer verticalement les informations suivantes :
Pour se faire, j'utilise la propriété line-height du CSS sur mon div mais le résultat est le suivant :
Il se créé un espace énorme entre chaque lignes...
Comment dois-je faire ?
Voici mon code :
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 <!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" lang="fr"> <head> <title>xxxx</title> <link rel="stylesheet" type="text/css" href="css/global.css"/> <meta http-equiv="content-language" content="fr"/> <meta http-equiv="content-type" content="text/html; charset=iso-8859-15"/> <meta http-equiv="content-style-type" content="text/css"/> <script type="text/javascript" src="js/global.js"></script> </head> <body> <div id="global"> <div id="header">logo + publicite</div> <div id="live"> <div id="live_date">date<br/>heure<br/>saint glinglin</div> <div id="live_informations">informations ici...</div> <div id="live_statistiques">x personne(s) sur le site<br/>x personne(s) sur le forum</div> </div> <div id="menu">menu</div> <div id="body">aaa<br/>bbbb<br/>ccccc</div> <div id="footer">xxx</div> </div> </body> </html>Je viens de voir ici :
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
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98 body { background-color : #34628A; font-family : Verdana; font-size : 11px; } img { border : 0; } #global { background-color : #FFFFFF; border : 3px solid #FFFFFF; left : 50%; margin-left : -380px; position : absolute; width : 760px; } #header { background-color : #FFAC11; border-bottom : 3px solid #FFFFFF; } #live { background-color : #FFCE73; border-bottom : 1px solid #000000; border-top : 1px solid #000000; font-size : 10px; height : 40px; padding : 2px; width : 758px; } #live_date { border-right : 1px dotted #000000; float : left; height : 42px; text-align : center; width : 186px; } #live_informations { float : left; height : 40px; padding-bottom : 1px; padding-left : 3px; padding-right : 3px; padding-top : 1px; width : 378px; } #live_statistiques { border-left : 1px dotted #000000; float : left; height : 42px; text-align : center; width : 186px; } #menu { background-color : #A0BED8; border-bottom : 3px solid #FFFFFF; border-right : 3px solid #FFFFFF; border-top : 3px solid #FFFFFF; left : 0; position : absolute; width : 200px; } #body { background-color : #FFFFFF; border-bottom : 3px solid #FFFFFF; border-top : 3px solid #FFFFFF; margin-left : 203px; min-height : 500px; } #footer { background-color : #A0BED8; border-top : 1px solid #000000; border-bottom : 1px solid #000000; color : #000000; font-size : 10px; text-align : center; }
http://fushia75.free.fr/article.php3?id_article=95
Que faire quand il y a plusieurs lignes ?Attention! Cette astuce fonctionne uniquement si le texte dans le conteneur est sur une seule ligne!
Merci d'avance,
Mathieu
Partager