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.


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.