Cross Browser Vertically and Horizontally Centered Images in CSS without Tables


/ Published in: CSS
Save to your folder(s)

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


Copy this code and paste it in your HTML
  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%; }

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

Report this snippet


Comments

RSS Icon Subscribe to comments

You need to login to post a comment.