Posted By

alexandrepayet on 04/13/10


Tagged

css html center centrer verticalement


Versions (?)

Who likes this?

1 person have marked this snippet as a favorite

abbyabigale


HTML, CSS : Centrer verticalement un texte dans un div


 / Published in: HTML
 

  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
  3.  
  4. <style type="text/css">
  5.  
  6. .vcenter span{
  7. line-height: 24px;
  8.  
  9. /*
  10. grâce à cette astuce le span va se comporter comme une image, ainsi la propriété 'vertical-align' pourra agir sur lui
  11. */
  12. display: inline-block;
  13. /*
  14. ... on align le text verticalement au centre
  15. RMQ : pour un alignement en bottom il faudra modifier le line-height de l'element vcenter de manière à ce qu'il soit plus ou moins le double d'une line-height actuel
  16. */
  17. vertical-align: middle;
  18. }
  19.  
  20. .vcenter{
  21. margin: 0;
  22. line-height: 200px;
  23. }
  24.  
  25. .conteneur{
  26. height: 200px; //la configuration du conteneur avec une hauteur et overflow en hidden à son importance si on ne veut pas voir les elements qui suivent être poussé vers le bas
  27. overflow-y: hidden;
  28.  
  29. width: 500px;
  30. border: 1px red solid;
  31. }
  32.  
  33. </style>
  34. </head>
  35.  
  36.  
  37. <div class="conteneur">
  38. <p class="vcenter">
  39. <span>
  40. <img src="http://www.w3schools.com/images/h_logo.gif">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl
  41. </span>
  42. &nbsp;
  43. </p>
  44. </div>
  45.  
  46. </body>
  47. </html>

Report this snippet  

You need to login to post a comment.