Posted By

alp on 02/14/11


Tagged

images centering


Versions (?)

Who likes this?

3 people have marked this snippet as a favorite

droopysignal
bostonbasso
stonetatara


Cross Browser Vertically and Horizontally Centered Images in CSS without Tables


 / Published in: CSS
 

URL: http://snippets.dzone.com/posts/show/12757

this centers an image of unknown size vertically and horizontally within a box

  1. <figure class='logo'>
  2. <span></span>
  3. <img class='photo'/>
  4. </figure>
  5.  
  6. .logo {
  7. display: block;
  8. text-align: center;
  9. display: block;
  10. text-align: center;
  11. vertical-align: middle;
  12. border: 4px solid #dddddd;
  13. padding: 4px;
  14. height: 74px;
  15. width: 74px; }
  16. .logo * {
  17. display: inline-block;
  18. height: 100%;
  19. vertical-align: middle; }
  20. .logo .photo {
  21. height: auto;
  22. width: auto;
  23. max-width: 100%;
  24. max-height: 100%; }

Report this snippet  

Comments

RSS Icon Subscribe to comments
Posted By: brenjt on February 19, 2011

Doesn't work in ie7 and 6

You need to login to post a comment.