advanced search

We Recommend

CSS: The Definitive Guide CSS: The Definitive Guide
Provides you with a comprehensive guide to CSS implementation, along with a thorough review of all aspects of CSS 2.1. Updated to cover Internet Explorer 7, Microsoft's vastly improved browser, this new edition includes content on positioning, text wrapping (nowrap), lists and generated content, table layout, user interface, paged media, and more.

Posted By

teddyzetterlund on 02/25/08


Tagged

css html images center


Versions (?)


Who likes this?

1 person has marked this snippet as a favorite

basicmagic


Vertical Centering of Images

Published in: CSS 

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.


Plain TextExpand 
  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 

You need to login to post a comment.