Discussion :

[Shandler]

Bonjour,

J'ai un <div> de taille fixe de 200px sur 200px et donc dans ce <div> je voudrais mettre du texte.
J'emploie la balise <p> pour positionner mon texte sachant qu'il doit avoir un écart de 5px de chaque coté donc mon probléme est le suivant car je ne sais pas comment faire pour que mon texte dans la balise <p> reste toujours au milieu de mon div sachant que le texte dans cette balise peut être long comme court. En gros j'aimerais que mon texte est toujours la même distance en haut et en bas par rapport au bord de mon div.

Merci beaucoup de votre aide !

[E.Bzz]

Bonjour,

Code :

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

1
2
<div style="width:200px;height:200px;text-align:center;vertical-align:middle;padding:5px;">
totototototo blablabla blablabla blablabla totototototo </div>

A+

[Shandler]

J'avais deja ca donc j'ai rajouter ce que tu m'as dis mais ca marche toujours pas.

Code :

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

1
2
3
.news {margin:92px 0 0 10px; height:200px; width:200px; background:#6481B1;}
 
.news p {position:absolute; width:170px; margin:170px 0 0 50px; font:bold 12px Times sans-serif; text-align:center; vertical-align:middle;}

Merci a toi !!

[psykbe]

Tu veux dire un texte centré dans ton div ou un div centré sur la page ?

Car le code ci dessus centre le texte à l'intérieur du div (à la manière word quoi) et dès qu'un mot dépasse les 200px il est remit à la ligne automatiquement.

[Shandler]

vi sauf que la mon texte est n'ira jamais vers le haut, il continuera a descendre alors que moi je veut que ca s'équilibre en haut et en bas.

[psykbe]

Il n'y a pas une propriété v-align c'est ça que tu cherche ? donc en gros centrage horizontal et vertical ?

[Shandler]

voila tu as tous compris et j'ai pas trouvé mon bonheur.

[psykbe]

Je n'ai jamais réussi à faire ce genre d'opération avec un div par contre un table sans problème

Code :

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

1
2
3
<table width="200" height="200"><tr>
  <td align="center" valign="middle"> totototototo blablabla blablabla blablabla totototototo gfefef efefe </td>
</tr></table>

Quid : il faut dans ce cas faire un table dans ton div ?

[E.Bzz]

Il n'y a pas une propriété v-align c'est ça que tu cherche ? donc en gros centrage horizontal et vertical ?

Code :

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

vertical-align:middle;

Elle y était

Qu'est-ce que tu veux dire par

vi sauf que la mon texte est n'ira jamais vers le haut

Parce que si la taille est fixe (200 X 200) et que le texte est variable, forcément, tu n'auras pas toujours les même espacement sur les côtés et haut + bas.
Pour ça, il ne faudrait pas fixer les largeur et hauteur, pour que le div s'adapte ...

A+

[psykbe]

Il souhaite je pense faire une zone DIV de 200 sur 200 fixe peu importe le contenu mais que celui ci soit centré verticalement et horizontalement (donc si il n'y a que 2 lignes comme ici centré dans les 2 sens donc ça apparait au milieu de la zone) et si il y a plus de texte, que cette zone reste à 200*200 mais scrollable en hauteur par exemple (type rapid chat sur les sites).

Ici la propriété vertical-align y est mais ne fonctionne pas (étant donné que le texte reste scotché au dessus).

[E.Bzz]

Ici la propriété vertical-align y est mais ne fonctionne pas (étant donné que le texte reste scotché au dessus).

Ouaip !
Donc, faut laisser le vertical-align et le padding 5px (pour quand le texte est suffisament "petit"), mais détecter quand la taille du texte "dépasse". Et pour pas que le texte se "sctoche" en haut, il faut alors modifier le style en dynamique, pour passer en vertical-align:top (mais en gardant un padding de 5px), et en overflow:scroll.

Le pb sera alors certainement celui de la "détection" de la taille max autorisée pour le texte avant le changement de style ...

[Shandler]

Merci pour tous cette angoument.

Donc moi la pour le moment mon texte est au milieu de mon div mais manuellement grace a mon margin:170px 0 0 50px; et comme ce div recois un contenu d'un news, la news peut faire 2 ligne comme 5 bien sur elle sera limiter pas plus long que le div et faut que la news reste toujours au centre de mon div.

Merci a vous

[Shandler]

Personne n'a d'idée ?

Merci a vous.

[E.Bzz]

Personne n'a d'idée ?

Ben ... ne sachant pas ce que donne ce qu'on t'a déjà proposé : non

A+

[Shandler]

Tous ce que vous m'avez proposer ne marche pas pour moi donc c'est pour ca que je re-demande votre aide.

Merci.

[Bisûnûrs]

Code html :

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

1
2
3
<div style="width:190px;height:190px;padding:5px">
   <!-- contenu -->
</div>

Avec un DOCTYPE qui va bien.

[Shandler]

Bonjour Bisûnûrs,

Je suis d'accord pour le div car il doit avoir une taille fixe mais pour le texte qui viens a l'intérieur comment faire pour qu'il soit au centre quelque soit la nombre de ligne comme expliqué plus haut dans le topic.

[Bisûnûrs]

CSS2 ne prévoit pas ce genre de cas, il faudra attendre CSS3 pour pouvoir le faire, en attendant, il reste la solution du table et de son attribut valign ...

[Shandler]

Oki merci a toi et a vous tous.