Cross Browser Vertically and Horizontally Centered Images in CSS without Tables


SUBMITTED BY: Guest

DATE: May 1, 2013, 9:39 p.m.

FORMAT: CSS

SIZE: 522 Bytes

HITS: 1157

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

comments powered by Disqus