Vertical inside div

by Luong Dung

HTML

<div class=frame><img src="http://jsfiddle.net/img/logo.png" height=250 /></div>
<div class=frame><img src="http://jsfiddle.net/img/logo.png" height=25 /></div>
<div class=frame><img src="http://jsfiddle.net/img/logo.png" height=23 /></div>
<div class=frame><img src="http://jsfiddle.net/img/logo.png" height=21 /></div>
<div class=frame><img src="http://jsfiddle.net/img/logo.png" height=19 /></div>
<div class=frame><img src="http://jsfiddle.net/img/logo.png" height=17 /></div>
<div class=frame><img src="http://jsfiddle.net/img/logo.png" height=15 /></div>
<div class=frame><img src="http://jsfiddle.net/img/logo.png" height=13 /></div>
<div class=frame><img src="http://jsfiddle.net/img/logo.png" height=11 /></div>
<div class=frame><img src="http://jsfiddle.net/img/logo.png" height=9 /></div>
<div class=frame><img src="http://jsfiddle.net/img/logo.png" height=7 /></div>
<div class=frame><img src="http://jsfiddle.net/img/logo.png" height=5 /></div>
<div class=frame><img src="http://jsfiddle.net/img/logo.png" height=3 /></div>

CSS

.frame {
  height: 25px;
  /* equals max image height */
  width: 160px;
  border: 1px solid red;
  white-space: nowrap;
  text-align: center;
  margin: 1em 0;
}

.frame:before,
.frame_before {
  content: "";
  display: inline-block;
  height: 100%;
  vertical-align: middle;
}

img {
  background: #3A6F9A;
  vertical-align: middle;
  max-height: 25px;
  max-width: 160px;
}


/* Move this to conditional comments */

.frame {
  list-style: none;
  behavior: expression( function(t) {
    t.insertAdjacentHTML('afterBegin', '<span class="frame_before"></span>');
    t.runtimeStyle.behavior='none';
  }
  (this));
}