题

如何在包含内部对齐图像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 maximum 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 …

我正在尝试创建一些并排排列的流体图像,但也应该在中间垂直对齐,无论高度尺寸是多少,我都将图像设置为最大宽度:100%因此它们保持不变在他们的父母最大宽度内,所以我可以在较小的屏幕宽度减少这些尺寸.然而,我的问题是,我不确定垂直对齐这些图像的最佳方法,有人可以建议吗？

CSS

.img-ctn {
    display: inline-block;
    margin-right: 3%;
    max-width: 120px;
    background: #cecece;
}

.img-ctn > img {
    display: block;
    height: auto;
    max-width: 100%;
    min-width: 100%;
    vertical-align: middle;
}

小提琴: http ://jsfiddle.net/xmJ3R/