如何垂直对齐div内的图像？

Question

如何垂直对齐div内的图像？

题

如何在包含内部对齐图像div？

例

在我的例子，我需要垂直居中的<img>在<div>用class ="frame“：

<div class="frame" style="height: 25px;">
    <img src="http://jsfiddle.net/img/logo.png" /></div>

.frame高度固定，图像高度未知。.frame如果这是唯一的解决方案，我可以添加新元素。我试图在IE≥7，Webkit，Gecko上做到这一点。

在这里查看jsfiddle

.frame {

    height: 25px;      /* equals max image height */

    line-height: 25px;

    width: 160px;

    border: 1px solid red;

    

    text-align: center; margin: 1em 0;

}

img {

    background: #3A6F9A;

    vertical-align: middle;

    max-height: 25px;

    max-width: 160px;

}

        

<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>

Answer 1

3线解决方案：position:&nbsp;relative;top:&nbsp;50%;transform:&nbsp;translateY(-50%);这适用于任何事情。从这里开始。