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