如何在包含div内对齐图像？
实例
在我的示例中，我需要使用class=“frame”将＜img＞垂直居中放置在＜div＞中：
<div class="frame" style="height: 25px;">
<img src="http://jsfiddle.net/img/logo.png" />
</div>
.frame的高度是固定的，图像的高度是未知的。如果这是唯一的解决方案，我可以在.frame中添加新元素。我正在尝试在Internet Explorer 7和更高版本WebKit、Gecko上执行此操作。
看到这里的jsfiddle。
.框架{高度：25px；/*等于最大图像高度*/线条高度：25px；宽度：160px；边框：1px纯红色；文本对齐：居中；边距：1em 0；}国际货币基金组织{背景：#3A6F9A；垂直对齐：中间；最大高度：25px；最大宽度：160px；}＜div class＝frame＞<img src=“http://jsfiddle.net/img/logo.png“高度=250/></div>＜div class＝frame＞<img src=“http://jsfiddle.net/img/logo.png“高度=25/></div>＜div class＝frame＞<img src=“http://jsfiddle.net/img/logo.png“高度=23/></div>＜div class＝frame＞<img src=“http://jsfiddle.net/img/logo.png“高度=21/></div>＜div class＝frame＞<img src=“http://jsfiddle.net/img/logo.png“高度=19/></div>＜div class＝frame＞<img src=“http://jsfiddle.net/img/logo.png“高度=17/></div>＜div class＝frame＞<img src=“http://jsfiddle.net/img/logo.png“高度=15/></div>＜div class＝frame＞<img src=“http://jsfiddle.net/img/logo.png“高度=13/></div>＜div class＝frame＞<img src=“http://jsfiddle.net/img/logo.png“高度=11/></div>＜div class＝frame＞<img src=“http://jsfiddle.net/img/logo.png“高度=9/></div>＜div class＝frame＞<img src=“http://jsfiddle.net/img/logo.png“高度=7/></div>＜div class＝frame＞<img src=“http://jsfiddle.net/img/logo.png“高度=5/></div>＜div class＝frame＞<img src=“http://jsfiddle.net/img/logo.png“高度=3/></div>
http://jsfiddle.net/MBs64/
.frame {
height: 35px; /* Equals maximum image height */
width: 160px;
border: 1px solid red;
text-align: center;
margin: 1em 0;
display: table-cell;
vertical-align: middle;
}
img {
background: #3A6F9A;
display: block;
max-height: 35px;
max-width: 160px;
}
关键属性是显示：表单元格；for.frame.Div.frame显示为与此内联，因此需要将其包装在块元素中。
这适用于Firefox、Opera、Chrome、Safari和Internet Explorer 8（及更高版本）。
更新
对于Internet Explorer 7，我们需要添加一个CSS表达式：
*:first-child+html img {
position: relative;
top: expression((this.parentNode.clientHeight-this.clientHeight)/2+"px");
}
使用纯CSS尝试此解决方案http://jsfiddle.net/sandeep/4RPFa/72/
也许这是HTML的主要问题。在HTML中定义类和图像高度时，不使用引号。
CSS:
.frame {
height: 25px; /* Equals maximum image height */
width: 160px;
border: 1px solid red;
position: relative;
margin: 1em 0;
top: 50%;
text-align: center;
line-height: 24px;
margin-bottom: 20px;
}
img {
background: #3A6F9A;
vertical-align: middle;
line-height: 0;
margin: 0 auto;
max-height: 25px;
}
当我处理img标记时，它会从顶部留出3像素到2像素的空间。现在我降低了线的高度，它开始工作了。
CSS:
.frame {
height: 25px; /* Equals maximum image height */
width: 160px;
border: 1px solid red;
margin: 1em 0;
text-align: center;
line-height: 22px;
*:first-child+html line-height:24px; /* For Internet Explorer 7 */
}
img {
background: #3A6F9A;
vertical-align: middle;
line-height: 0;
max-height: 25px;
max-width: 160px;
}
@media screen and (-webkit-min-device-pixel-ratio:0) {
.frame {
line-height:20px; /* WebKit browsers */
}
线条高度属性在不同的浏览器中呈现不同。因此，我们必须定义不同的线宽属性浏览器。
检查此示例：http://jsfiddle.net/sandeep/4be8t/11/
查看以下关于不同浏览器中线条高度差异的示例：Firefox和Chrome中的输入高度差异
