[CSS 3] Centrage vertical de texte dans un div en position absolute

[sovitec]

Bonjour,

Le titre dit presque tout. Je cherche à centrer verticalement un texte, qui peut faire plusieurs lignes, dans un div en position absolute.

Je me contenterais d'une solution qui fonctionne dans Chromium vu que c'est le seul navigateur qui sera utilisé.

Merci d'avance.

[kdmbella]

une idée me vient a l'esprit pour ton problème :
<div>
<center>
<p>
ton texte ici
</p>
</center>

</div>
et si cette solution ne te convient pas je pense que tu devra obligatoirement passer par les CSS

[sovitec]

Envoyé par kdmbella

une idée me vient a l'esprit pour ton problème :
<div>
<center>
<p>
ton texte ici
</p>
</center>

</div>

Center ce n'est pas pour le centrage horizontal ?

Envoyé par kdmbella

et si cette solution ne te convient pas je pense que tu devra obligatoirement passer par les CSS

Mais je veux le faire en CSS.

Merci pour la réponse en tous cas.

[FirePrawn]

Bonjour,

Ton texte est directement dans le div ?

[sovitec]

Envoyé par FirePrawn

Ton texte est directement dans le div ?

Non, il est dans une balise <p>

[FirePrawn]

Tu peux essayer ça :

Code :

1
2
3
4
5
 
#id_de_ton_bloc {
     display:table-cell;
     vertical-align:middle;
}

[sovitec]

Envoyé par FirePrawn

Tu peux essayer ça :

Code :

Ça ne marche pas, c'est pour ça que j'ai précisé que mon div est en position absolute.

Merci quand même.

[kdmbella]

ton div en position absolute est ce que c'est une contrainte ou alors tu peux t'en passé ?

[sovitec]

Envoyé par kdmbella

ton div en position absolute est ce que c'est une contrainte ou alors tu peux t'en passé ?

C'est malheureusement une contrainte.

[miss_socrates]

Je propose une solution qui n'est pas la plus simple mais qui pourra peut-être fonctionner.
Je préciserais la hauteur de la div et puis je mettrais un padding au dessus et en dessous (par ex. en auto ou en pourcentage: par ex. 10% au-dessus et en dessous); ou en jouant sur le texte dans le paragraphe en précisant l'espace à laisser au-dessus et en dessous (càd la hauteur de la div moins l'espace occupé par le texte (4 lignes de texte dans mon exemple soit 4 em avec 3 em au-dessus et 3 em en dessous pour faire 10 au total)).
Au lieu des em, il est bien sûr possible d'utiliser des px.

Comme ceci:

Code :

1
2
3
4
5
6
 
<div id="div1">
      <p>
        texte 4 lignes
      </p>
</div>

en CSS:

Code :

1
2
3
4
5
#div1{
        height: 150px;
        padding-top: auto;
        padding-bottom: auto;
}

ou

Code :

1
2
3
4
5
6
 
p{
        height: 10em;
        padding-top: 3em;
        padding-bottom: 3em;
}

[miss_socrates]

Il y a tout simplement en CSS la propriété line-height ; il faut spécifier la même hauteur que la hauteur de la <p>. Line-height ne fonctionne en général que s'il n'y a qu' une seule ligne de texte, mais j'ai constaté que parfois cela fonctionne avec plusieurs lignes;pourquoi ne pas essayer tout simplement?

Code :

1
2
3
4
5
6
 
<div>
<p>
    texte    
</p>
</div>

en CSS

Code :

1
2
3
4
5
 
p{
height: 10em;
line-height: 10em;
}

[jreaux62]

Bonjour,
une solution pas très élégante mais qui à l'avantage de fonctionner sans se prendre trop la tête :

Code :

1
2
3
4
5
6
7
<div id="conteneur">
	<table style="height:100%"><tr><td>
		texte   sdgqsdg dfgsdf g<br />
		sdfg sdfgsdfg sdfgsd<br />
		fg sdfgs dfgsdfg sdfgsdfg sdfs
	</td></tr></table>
</div>

[sovitec]

Envoyé par miss_socrates

Je propose une solution qui n'est pas la plus simple mais qui pourra peut-être fonctionner.
Je préciserais la hauteur de la div et puis je mettrais un padding au dessus et en dessous (par ex. en auto ou en pourcentage: par ex. 10% au-dessus et en dessous); ...

Je connais la hauteur de la div, mais pas le nombre de lignes de texte.

Envoyé par miss_socrates

Il y a tout simplement en CSS la propriété line-height ; il faut spécifier la même hauteur que la hauteur de la <p>. Line-height ne fonctionne en général que s'il n'y a qu' une seule ligne de texte, mais j'ai constaté que parfois cela fonctionne avec plusieurs lignes;pourquoi ne pas essayer tout simplement?

Je veux maîtriser de façon indépendante l'interligne, pas possible de jouer avec line-height donc.

Envoyé par jreaux62

Bonjour,
une solution pas très élégante mais qui à l'avantage de fonctionner sans se prendre trop la tête :

Code :

J'espérais ne pas avoir à en arriver là, mais j'ai l'impression que je n'ai pas vraiment le choix.

Merci à tous

[jreaux62]

Envoyé par sovitec

Je connais la hauteur de la div, mais pas le nombre de lignes de texte.

C'est là qu'est l'os !

J'espérais ne pas avoir à en arriver là, mais j'ai l'impression que je n'ai pas vraiment le choix.

Il y a une solution en jquery avec .height() ... mais bon.

[Macmillenium]

Envoyé par sovitec

Je veux maîtriser de façon indépendante l'interligne, pas possible de jouer avec line-height donc.

Tu peux utiliser un 2eme élément pour rétablir le line-height.
Voir ce thread http://www.developpez.net/forums/d10...verticalement/

[Candygirl]

Envoyé par sovitec

Je connais la hauteur de la div

Si tu connais sa hauteur, avec quelques restrictions de mise en page, tu peux simplement attribuer le table-cell, ainsi que la même hauteur à ton p:

Code :

1
2
3
4
5
p {
  display:table-cell;
  height:400px /* hauteur du div */
  vertical-align:middle;
}

Au besoin, tu peux rajouter une imbrication pour ajouter le display:table.

[sovitec]

Envoyé par jreaux62

Il y a une solution en jquery avec .height() ... mais bon.

Même avec ça je ne vois pas trop comment m'en sortir sans connaître le nombre de ligne de texte.

Envoyé par Candygirl

Si tu connais sa hauteur, avec quelques restrictions de mise en page, tu peux simplement attribuer le table-cell, ainsi que la même hauteur à ton p...

Ça fonctionne, mais ça casse mes CSS transform et animation que j'applique en plus.

Envoyé par Macmillenium

Tu peux utiliser un 2eme élément pour rétablir le line-height.
Voir ce thread http://www.developpez.net/forums/d10...verticalement/

Pas mal, je dois encore faire quelques tests pour vérifier que cela fonctionne dans tous les cas, mais c'est la meilleure solution actuelle.

Merci beaucoup à tous.

[jreaux62]

Jquery :
j'avais bricolé un code ici : Remplir automatiquement l'espace libre sur un div

Ici, on va modifier le css en fonction de la hauteur du div (contenant le texte à centrer verticalement)

Code :

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
<!DOCTYPE HTML>
<html xmlns="http://www.w3.org/1999/xhtml" dir="ltr">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
	<title>Test</title>
 
	<!-- Scripts Google : initialisation jquery -->
    <script charset="utf-8" src="http://code.jquery.com/jquery-1.6.2.min.js"></script>
 
	<style type="text/css">
.conteneur {
	width:150px;
	height:150px;
	border:1px solid transparent; /* bizarrement, ca ne fonctionne pas correctement sans border (?) */
	background:#ccc; /* (test) */
}
.textcentre {
	background:yellow; /* (test) */
}
	</style>
 
</head>
 
<body>
 
<div class="conteneur">
	<div class="textcentre">
		texte sdgqsdg dfgsdf g<br />
		sdfg sdfgsdfg sdfgsd f fsdfsdfqsdgf sdgsdfgsdfg sdfgsdfg.
	</div>
</div>
 
	<script type="text/javascript">
	$(function() {
		// centrer verticalement "textcentre" en fonction du texte qu il contient
		var A = $('.conteneur').height(); 	// hauteur de "conteneur" (en px)
		var B = $('.textcentre').height(); 	// hauteur de "textcentre" (en px)
		var C = (A - B)/2;				 	// margin-top
		$('.textcentre').css('margin-top',C+'px'); 		// on affecte la valeur C (en px) à la margin-top de "textcentre"
	});
	</script>

ps : je ne suis pas un spécialiste jquery, loin de là !
C'est peut-être "un canon pour tuer une mouche" (?) A utiliser s'il y a déjà du jquery dans la page.