Centralizando imagem em div

by Daniel Beff

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;
    
    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)
    );
}