垂直对齐居中图像答案

【问题标题】：Center Image with Vertical Align垂直对齐居中图像
【发布时间】：2012-08-30 05:24:12
【问题描述】：

对我来说，图像不会以垂直对齐为中心，看起来应该如此。我只在怪癖模式下为 IE7 编码（不幸的是）。我的代码如下。任何人都知道为什么这不会垂直对齐

<html>
<head>
</head>
<body>
<div style="height:500px; width 500px; line-height:500px; background-color:Green; vertical-align:middle;">
   <img src="./images/load.gif" style="vertical-align:middle;"/>
</div>
</body>
</html>

【问题讨论】：

标签： html css image vertical-alignment

【解决方案1】：

如果您想在 div 中垂直对齐图像，您应该执行以下操作：

div {
    position:relative;
    height:500px;
    width:500px;
}

div img {
    position:absolute;
    top:50%;
    margin-top:-XXXpx; /* where XXX is half the height of the image */
}

【讨论】：

【解决方案2】：

您可以将图像设置为背景图像，然后使用以下内容将背景居中：

<div style="height:500px; width 500px; line-height:500px; background: green url('/images/load.gif') left center no-repeat ; "></div>

【讨论】：