Gerer line-height pour centrer verticalement [Résolu]

insane1 · 09/06/2011, 14h33

Bonjour,
Voici ma question : comment peut on faire pour qu'un texte soit tout le temps centré verticalement, qu'il soit sur une ligne ou bien deux ?

Exemple :

Code :

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

1
2
3
4
5
6
7
<p style="background-color:red; width: 150px; height: 50px; line-height:50px;">
Une seule ligne 
</p>
 
<p style="background-color:red; width: 150px; height: 50px; line-height:25px;">
Une seule ligne qui deborde sur la seconde
</p>

En effet en gérant line-height on peut faire ce que je veux. Mais ce n'est pas dynamique.

Avez vous une solution autre que de passer par du js ?

Macmillenium · 09/06/2011, 15h02

Toujours en jouant sur le line-height:

Code css :

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

1
2
3
4
5
6
7
8
9
10
11
12
 
.verticale {
	width:150px; 
	height:150px;
	line-height:150px;
	background-color:red
}	
 
.verticale span { 
	display:inline-block;
	line-height:1.1 /* rétablir le line-height */
}

Code html :

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

1
2
3
4
 
<div class="verticale">
	<span>Une seule ligne qui deborde sur la seconde</span>
</div>

?

insane1 · 09/06/2011, 15h48

Merci de ta réponse Macmillenium.
J'ai testé le code que tu as proposé mais cela ne fonctionne pas (IE9, FF4).

J'ai cependant trouvé quelque chose qui a l'air de marcher, mais ça n'utilise pas line-height.

Code :

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

1
2
3
4
5
6
7
<div class="table">
<p>Une seule ligne</p>
</div>
 
<div class="table">
<p>Une ligne qui déborde sur la seconde </p>
</div>

Code :

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

1
2
3
4
5
6
7
8
9
10
11
div.table {
display:table;
border:1px solid;
width:150px;
}
div.table p
{
vertical-align:middle;
display:table-cell;
padding:1em;
}

Macmillenium · 09/06/2011, 15h57

Citation:

Envoyé par insane1

J'ai testé le code que tu as proposé mais cela ne fonctionne pas (IE9, FF4).

Code html :

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
 
<!doctype html> 
<html lang="fr"> 
 
<head> 
	<meta charset="utf-8" /> 
	<title>sans titre</title>
	<style>	
		html, body { margin:0; padding:0 }
 
		.verticale {
			width:150px; 
			height:150px;
			line-height:150px;
			background-color:red
		}	
 
		.verticale span { 
			display:inline-block;
			vertical-align:middle;
			line-height:1.1
		}
	</style>
</head> 
 
<body>
 
<div class="verticale">
	<span>Une seule ligne qui deborde sur la seconde</span>
</div>
 
</body>
</html>

Citation:

Envoyé par insane1

J'ai cependant trouvé quelque chose qui a l'air de marcher, mais ça n'utilise pas line-height.

Sauf que display:table/table-cell n'est pas supporté par IE7.

insane1 · 09/06/2011, 16h00

En effet la çà fonctionne. Au temps pour moi

Merci de l'info, je vais privilégier ton code alors.

kéraunos · 09/06/2011, 18h06

Oui, ça fonctionne pour deux lignes, mais l'alignement n'est toujours pas dynamique.

Ce problème m'intéresse. Je serait curieux de savoir si Macmillenium a une solution pour aligner verticalement 2, 3 ou 4 lignes.
J'avais lu quelque part que l'utilisation de vertical-align est très particulière. D'ailleurs quand j'essaie ce 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
 
<!doctype html> 
<html lang="fr"> 
 
<head> 
	<meta charset="utf-8" /> 
	<title>sans titre</title>
	<style>			
		.verticale {
			height:150px;
			vertical-align: middle;
			background: green;
			}
	</style>
</head> 
 
<body>
 
<div class="verticale">
	texte
</div>
 
</body>
</html>

...ça ne fonctionne pas du tout.

Macmillenium · 09/06/2011, 22h02

Citation:

Envoyé par kéraunos

Oui, ça fonctionne pour deux lignes, mais l'alignement n'est toujours pas dynamique.

Oups, dsl, il manquait un vertical-align:middle sur le span, j'ai édité mon dernier post.

Citation:

Envoyé par kéraunos

J'avais lu quelque part que l'utilisation de vertical-align est très particulière. D'ailleurs quand j'essaie ce code :
...ça ne fonctionne pas du tout.

C'est normal, dans ton exemple vertical-align ne peut pas être appliqué si le conteneur n'est pas de rendu table-cell, c'est l'une des particularités de cette propriété.

kéraunos · 10/06/2011, 00h10

D'accord.
Et dans mon exemple, qu'est-il suffisant de modifier pouvoir utiliser display: inline-block (ou block tout court) pour .verticale ?

Merci.

Macmillenium · 10/06/2011, 12h26

Citation:

Envoyé par kéraunos

Et dans mon exemple, qu'est-il suffisant de modifier pouvoir utiliser display: inline-block (ou block tout court) pour .verticale ?

je comprends pas, tu veux faire quoi exactement?

kéraunos · 11/06/2011, 00h48

Oui c'est vrai que ce n'était pas très clair, voire pas français.

Ce que je veux savoir, par rapport à mon exemple, c'est ce que j'ai besoin de modifier pour avoir un alignement vertical du contenu du div .verticale. Mais sans passer par un rendu de type table-cell.

Macmillenium · 11/06/2011, 17h53

Citation:

Envoyé par kéraunos

avoir un alignement vertical du contenu du div .verticale. Mais sans passer par un rendu de type table-cell.

Reprends mon code alors

Cette technique consiste à:
- Appliquer à .verticale un line-height = hauteur du bloc,
- encapsuler le texte dans un span (ou autre) doté d'un display:inline-block, qui servira à rétablir le line-height,
- aligner ce span verticalement à l'aide de vertical-align.

09/06/2011, 16h00	#5
insane1 Membre confirmé Inscription : février 2009 Messages : 317 Détails du profil Informations forums : Inscription : février 2009 Messages : 317 Points : 209 Points : 209	En effet la çà fonctionne. Au temps pour moi Merci de l'info, je vais privilégier ton code alors.
	00

10/06/2011, 00h10	#8
kéraunos Membre régulier Inscription : janvier 2005 Messages : 157 Détails du profil Informations personnelles : Sexe : Localisation : France Informations forums : Inscription : janvier 2005 Messages : 157 Points : 71 Points : 71	D'accord. Et dans mon exemple, qu'est-il suffisant de modifier pouvoir utiliser display: inline-block (ou block tout court) pour .verticale ? Merci.
	00

11/06/2011, 00h48	#10
kéraunos Membre régulier Inscription : janvier 2005 Messages : 157 Détails du profil Informations personnelles : Sexe : Localisation : France Informations forums : Inscription : janvier 2005 Messages : 157 Points : 71 Points : 71	Oui c'est vrai que ce n'était pas très clair, voire pas français. Ce que je veux savoir, par rapport à mon exemple, c'est ce que j'ai besoin de modifier pour avoir un alignement vertical du contenu du div .verticale. Mais sans passer par un rendu de type table-cell.
	00

Outils de la discussion
Afficher une version imprimable Envoyer un lien vers cette page par email