advanced code snippet search

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
 
Expand | Embed | Plain Text 
  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  

You need to login to post a comment.