Discussion :

[pierrot10]

Bonjour a tous,
je me prend toujours la tete avec le position d'un texte dans un div.

J'ai essayé cette proriété

Code CSS :

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

1
2
3
4
5
6
7
8
9
10
11
 
	vertical-align:middle;
	position:absolute;
	z-index:6;
	width:185px;
	font-weight:mormal;
	margin-left:20px;
	margin-top:190px;
	padding:2px;
	border:0px solid #cccccc;
	height:40px;

mais le vertical-align:middle, ne fait absolument rien, mon texte reste coller en haut. Je ne veux pas jouer avec des padding, car mon texte peut avoir 3 mot comme il peut en avoir 10. S'il a dix mot, il prendra 3 lignes, s'il a un mot il en prendra qu'une lign, maos dans ce cas, il faut qu'il soit au milieu....

Comment puis-je fait pour que le texte soit toujours aligné au centre de la hauteur d'un div?

[pop_up]

je n'en suis pas sur mais je crois que le vertical-align ne fonctionne qu'avec un element inline.

essai avec un display: table ou display:table-cell

[pierrot10]

Salut pop_up,
J'ai essayé tes propositions, mais sans succès

[yarby]

salut

si tu veux centrer un text dans un div il faut rajouter à:

vertical-align: middle;

la hauteur de la ligne sur laquelle il se centre:

line-height: 40px; dans ton cas

test le, ça devrait marcher

[pop_up]

si tu mets un line-height: 40px; ça centrera pas un texte qui fait plus d'une ligne si ?

[pierrot10]

Merci mais ceci ne resou pas probleme non plus car si je mets

line-height: 40px;

Il va me mettre un espace de 40px entre mes lignes, dans le cas ou j'ai 2 ligne ou plus. Donc ca ne joue pas car mes 3 ligne doivent garder un espacement "standard", soit egal au <br />

[pierrot10]

Si pup_up, si je mets line-height, ca va cebtrer mon texte au centre de mon <div> sauf que si j'ai plusieur ligne, il va uassi mettre 40px entre mes lignes. Et ca, ca c'est pas bon

A moin qu'on aie une solution pour contrer le 40px entre mes lignes dans le cas ou j'en ai plusieur...

[clb56]

Comment puis-je fait pour que le texte soit toujours aligné au centre de la hauteur d'un div?

Pas vraiment de solution css correctement implémentée par l'ensemble des navigateurs. c'est l'un des cas où il vaut mieux se rabattre sur le balisage tableau :

Code :

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

1
2
3
4
5
6
 
<table>
<tr>
<td>... Ici le contenu...</td>
</tr>
</table>