Lego2012
9/26/2016 - 10:40 PM

Cross Browser vertically and horizontally centered

Cross Browser vertically and horizontally centered

/* 
This centers an image of unknown size vertically and horizontally within a box. The wrapper box has an explicit width and height. The 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%;
}