Advanced Search

HTML, CSS : Centrer verticalement un texte dans un div

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

Expand | Embed | Plain Text

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. <head>
  5. 	<style type="text/css">
  6.  
  7. 	.vcenter span{
  8. 		line-height: 24px;
  9.  
  10. 		/*
  11. 		grâce à cette astuce le span va se comporter comme une image, ainsi la propriété 'vertical-align' pourra agir sur lui
  12. 		*/
  13. 		display: inline-block; 	
  14. 		/*
  15. 		... on align le text verticalement au centre
  16. 		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
  17. 		*/
  18. 		vertical-align: middle; 
  19. 	}
  20.  
  21. 	.vcenter{
  22. 		margin: 0;
  23. 		line-height: 200px;
  24. 	}
  25.  
  26. 	.conteneur{
  27. 	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
  28. 	overflow-y: hidden;
  29.  
  30. 	width: 500px;
  31. 	border: 1px red solid;
  32. 	}
  33.  
  34. 	</style>
  35. </head>
  36.  
  37. <body>
  38.  
  39. 	<div class="conteneur">
  40. 		<p class="vcenter">
  41. 			<span>
  42. 				<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 
  43. 			</span>
  44. 			&nbsp;
  45. 		</p>
  46. 	</div>
  47.  
  48. </body>
  49. </html>

Report this snippet


Comments

RSS Icon Subscribe to comments

You need to login to post a comment.