如何在包含内部对齐图像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 …可能重复:
如何水平和垂直居中div
我需要把图像放在html页面的中心,纵向和横向......一直在尝试一些东西,但似乎工作正常.为了得到我使用的水平对齐
<body style="text-align:center">
它工作正常,但垂直对齐怎么办？
问候
这里display-table在ie7中不起作用.是否有任何方式在ie7中应用相同的风格
请帮帮我.