[CSS] Centrage vertical avec line-height et texte sur plusieurs lignes ?

**MaTHieU_** · 11/08/2006, 12h18

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

**sedryk** · 11/08/2006, 14h41

Mathieu,

En effet la propriété line-height indique la hautur que doit avoir chaque ligne du "container" affecté ce qui explique que dans le cas d'un texte sur plusieurs lignes, l'affichage ne soit pas celui attendu.

Pour en revenir à ton problème, il existe plusieurs astucres pour arriver à ce que tu veux mais comme le mot "astuce" le signifie bien ce n'est pas toujours propre

1 - Il est possible d'utiliser une cellule de tableau unique avec la propriété vertical-align que seul les <td> supportent correctement sur tout les navigateur.

2 - Utiliser la valeur table-cell sur la propriété display du "container" pour le faire passé pour une cellule de tableau (il reste à ajouter vertical-align: middle et le tour est joué) mais cette technique ne marche pas sur IE

3 - Utiliser un javascript qui calcul la position de ton texte.

Sinon j'ai regarder un peu ton code css et je me suis permis de le retoucher, il engendrait quelques erreurs d'affichage au niveau des contours à cause de mauvaise utilisation de la propriété float.

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
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
<!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"/>
		<style>
		body
{
	background-color	: #34628A;
	font-family		: Verdana;
	font-size			: 11px;
}
 
img
{
	border			: 0;
}
 
#global
{
	background-color	: #FFFFFF;
	border			: 3px solid #FFF;
	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;
}
 
#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			: right;
	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;
	float: left;
	width			: 186px;
}
 
#body
{
	background-color	: #CCC;
	border-bottom		: 3px solid #FFFFFF;
	border-top		: 3px solid #FFFFFF;
	min-height		: 500px;
	float: left;
	width: 571px;
}
 
#footer
{
	background-color	: #A0BED8;
	border-top		: 1px solid #000000;
	border-bottom		: 1px solid #000000;
	color			: #000000;
	font-size			: 10px;
	text-align		: center;
	clear: left;
}
		</style>
	</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>

A noter que sous IE la propriété min-height ne fonctionne pas et que ta technique de centrage (position absolute et jeu de marge) va poser des problèmes si la fenêtre de ton navigateur devient moins large que la largeur de la DIV #global (on ne verra plus la partie gauche de ton site).

J'espère que tout ça t'aidera.

**MaTHieU_** · 11/08/2006, 15h30

Bonjour,

Merci pour les explications et les améliorations.

Quelle méthode me conseilles-tu pour garder un XHTML/CSS valide ?
Je ne pense pas utiliser la 3.

Merci,
Mathieu

**sedryk** · 11/08/2006, 15h38

Même si la solution 1 semble pas très belle, c'est celle qui te permettra le plus de compatibilté avec tous les navigateurs

**MaTHieU_** · 11/08/2006, 16h37

Bonjour,

OK!

Merci,
Mathieu

**Candygirl** · 11/08/2006, 16h45

Du moment que tu connais le nombre de lignes que tu as à ces 2 endroits, pourquoi ne pas donner une hauteur au conteneur et les centrer verticalement avec les marges négatives ? Du genre ajouter ça:

Code :

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

1
2
3
4
5
#live_statistiques{ position: relative;
	            height: 26px;
	            top: 50%;
                    margin-top: -13px;
                  }

**MaTHieU_** · 11/08/2006, 17h24

Bonjour,

C'est pas faux !

En plus, ça semble plus propre !

Merci,
Mathieu

**MaTHieU_** · 12/08/2006, 00h12

Bonjour,

Je viens d'essayer ta proposition Candygirl.

Ce qui m'embête, c'est qu'avec ton code, ma bordure verticale "dotted" ne prend pas toute la largeur du div #live conteneur des autres sous div.

Je n'ai donc pour le moment pas trouvé d'autres solutions que celle de sedryk.

Merci,
Mathieu

**Candygirl** · 12/08/2006, 00h39

Oui, j'avais vu pour le bordure mais je me disais que tu pouvais peut-être mettre une bordure gauche et droite à ton #live_informations, plutôt qu'à #live_date et live_statistiques, vu que tu n'as pas parlé de le centrer, lui

?

Mais bon, peut-être bien que la solution de sedryk reste mieux dans ton cas.

**MaTHieU_** · 12/08/2006, 00h41

Salut,

Je vais essayé!
J'avais pas pensé à cette méthode !

Merci,
Mathieu

**MaTHieU_** · 12/08/2006, 00h51

Bonsoir,

J'ai bidouillé vos deux solutions pour en arriver à ça :

C'est parfait avec Firefox !

Par contre avec Internet Explorer... C'est désastreux

Je ne sais pas où est passé mon menu

C'est pénible Internet Exlorer pour ça...

Mon code CSS actuellement :

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
99
100
101
102
103
 
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			: 36px;
	padding			: 2px;
}
 
#live_date
{
	float			: left;
	height			: 40px;
	text-align		: center;
	width			: 185px;
}
 
#live_informations
{
	border-left		: 1px dotted #000000;
	border-right		: 1px dotted #000000;
	float			: left;
	height			: 36px;
	padding-bottom		: 1px;
	padding-left		: 3px;
	padding-right		: 3px;	
	padding-top		: 1px;
	width			: 370px;
}
 
#live_statistiques
{
	float			: right;
	height			: 26px;
     margin-top		: -13px;
	position			: relative;
	text-align		: center;
	top				: 50%;
	width			: 185px;	
}
 
#menu
{
	background-color	: #A0BED8;
	border-bottom		: 3px solid #FFFFFF;
	border-right		: 3px solid #FFFFFF;
	border-top		: 3px solid #FFFFFF;	
	left				: 0;
	position			: absolute;
	width			: 186px;
}
 
#body
{
	background-color	: #CCC;
	border-bottom		: 3px solid #FFFFFF;
	border-top		: 3px solid #FFFFFF;	
	float			: left;	
	margin-left		: 189px;
	min-height		: 500px;
	width			: 571px;	
}
 
#footer
{
	background-color	: #A0BED8;
	border-top		: 1px solid #000000;
	border-bottom		: 1px solid #000000;
	clear			: left;
	color			: #000000;
	font-size			: 10px;
	text-align		: center;
}

Merci,
Mathieu

**Candygirl** · 12/08/2006, 12h24

c'est parce que IE bug un peu sur le référant à prendre pour le positionnement absolu lorsqu'il y a des frères (ou neveux

) en absolu entre le référant et le bloc positionné en absolu.

C'est le cas avec ton menu qui est en absolu et le positionnemnt absolu qu'on a introduit pour ton centrage vertical parasite.

Tu peux modifier ton montage comme suit pour palier au problème:

-Mettre ton menu en float left au lieu d'absolu, ajouter un clear
-Virer ton margin-left du #body

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
#menu
{
	background-color	: #A0BED8;
	border-bottom		: 3px solid #FFFFFF;
	border-right		: 3px solid #FFFFFF;
	border-top		: 3px solid #FFFFFF;	
	float				: left;
	clear			: left;
	width			: 186px;
}
 
#body
{
	background-color	: #CCC;
	border-bottom		: 3px solid #FFFFFF;
	border-top		: 3px solid #FFFFFF;	
	float			: left;	
	min-height		: 500px;
	width			: 571px;	
}

Autrement je rejoins l'avis de sedrik quant au centrage de ton site. Perso j'utiliserais plutôt le margin-auto que les marges négatives sous peine que ton site soit inutilisable sur des petites résolutions (le text-align center dans le body puis rétabli est pour le centrage sur ie5, pas vraiment indispensable, selon tes convictions

):

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
body
{
	background-color	: #34628A;
	font-family		: Verdana;
	font-size			: 11px;
        text-align:center;
}
 
 
#global
{
	background-color	: #FFFFFF;
	border			: 3px solid #FFFFFF;
        margin:auto;
	width			: 760px;
        text-align:left;
}

**MaTHieU_** · 12/08/2006, 12h45

Bonjour,

J'ai suivi tout vos conseils, le site est correct sur Internet Explorer 6/7 et Firefox tout en respectant la norme XHTML/CSS.

Je vous remercie beaucoup car sans vous je crois que je m'en serai pas sorti

Merci,
Mathieu

**sedryk** · 16/08/2006, 09h06

C'est un plaisir d'avoir pu t'aider

[CSS] Centrage vertical avec line-height et texte sur plusieurs lignes ?

Centrer un élément en CSS

Discussions similaires

Partager

Partager