HTML, CSS : Centrer verticalement un texte dans un div


/ Published in: HTML
Save to your folder(s)



Copy this code and paste it in your 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


Comments

RSS Icon Subscribe to comments

You need to login to post a comment.