vertically align divs and images

index.html

<!-- source: http://jsfiddle.net/kizu/4RPFa/4570/  -->
<!-- my test: https://jsfiddle.net/leepettijohn/fdor13vd/  -->
<style>
.frame {
    height: 100px;      /* equals max image height */
    width: 160px;
    border: 1px solid red;
    white-space: nowrap;
    text-align: center; margin: 1em 0;
}
.middle{
  display:inline;
  vertical-align:middle;
}
.helper {
    display: inline-block;
    height: 100%;
    vertical-align: middle;
}

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

</style>
<div class=frame>
    <span class="helper"></span><div class="middle"  >text</div>
</div>
<div class=frame>
    <span class="helper"></span><img src="http://jsfiddle.net/img/logo.png" height=25 />
</div>