Advanced Search

Vertical Centering of Images

/ Published in: CSS
Save to your folder(s)
I can't remember if this code is updated for IE7, if it is then it should be working in at least IE6-7, Safari 2-3, Opera 8 and Firefox 2-3.

Obviously the image_iefix is just for IE6.

Expand | Embed | Plain Text

Copy this code and paste it in your HTML 
  1. /* Image Centering: Cross-Browser, vertical and horizontal image centering
  2. ----------------------------------------------------------------------------*/
  3.  
  4. /* Example markup:
  5. <div class="image"><div class="image_align"><img src="yourimage.jpg" alt=""></div></div>
  6. */
  7.  
  8. .image {
  9. 	overflow: hidden;
  10. 	position: relative;
  11. }
  12.  
  13. .image[class] {
  14. 	display: table;
  15. 	position: static;
  16. }
  17.  
  18. .image_align[class] {
  19. 	display: table-cell;
  20. 	position: static;
  21. 	vertical-align: middle;
  22. }
  23.  
  24. .image img { margin: auto; }
  25.  
  26. * html .image_iefix {
  27. 	position: relative;
  28. 	top: -50%;
  29. }
  30.  
  31. * html .image_align {
  32. 	position: absolute;
  33. 	top: 50%;
  34. }

Report this snippet


Comments

RSS Icon Subscribe to comments

You need to login to post a comment.