如何在包含内部对齐图像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 …可能重复:
垂直居中变量高度图像,同时保持最大宽度/高度
所以这是一个问题,我有不固定尺寸的图像,我只知道高度或宽度必须是200px.现在我想将这个图像放在固定大小为200px x 200px的div中,并将其垂直和水平居中.可能吗？
我搜索了很多问题,但没有人回答我的问题,这应该是解决问题所有问题.