DZone Snippets is a public source code repository. Easily build up your personal collection of code snippets, categorize them with tags / keywords, and share them with the world

Lance has posted 24 posts at DZone. View Full User Profile

Cross Browser Vertically And Horizontally Centered Images In CSS Without Tables

12.18.2010
| 8353 views |
  • submit to reddit
        // this centers an image of unknown size vertically and horizontally within a box.
// the wrapper box has an explicit width and height.
// the <span> is a hack for internet explorer

<figure class='logo'>
    <span></span>
    <img class='photo'/>
</figure>

.logo {
  display: block;
  text-align: center;
  display: block;
  text-align: center;
  vertical-align: middle;
  border: 4px solid #dddddd;
  padding: 4px;
  height: 74px;
  width: 74px; }
  .logo * {
    display: inline-block;
    height: 100%;
    vertical-align: middle; }
    .logo .photo {
    height: auto;
    width: auto;
    max-width: 100%;
    max-height: 100%; }