Discussion :

[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]

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 ?

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]

Ton texte est directement dans le div ?

Non, il est dans une balise <p>

[FirePrawn]

Tu peux essayer ça :

Code :

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

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

[sovitec]

Tu peux essayer ça :

Code :

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

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

Ç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]

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 :

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

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

en CSS:

Code :

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

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

ou

Code :

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

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 :

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

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

en CSS

Code :

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

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

[Invité]

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

Code :

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

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]

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.

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.

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

Code :

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

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>

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

Merci à tous

[Invité]

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]

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]

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 :

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

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]

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.

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.

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.

[Invité]

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 :

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
<!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.