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>
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;
}
Je viens de voir ici :
http://fushia75.free.fr/article.php3?id_article=95

Attention! Cette astuce fonctionne uniquement si le texte dans le conteneur est sur une seule ligne!
Que faire quand il y a plusieurs lignes ?

Merci d'avance,
Mathieu