如何在两个 <div> 之间保持居中图像答案

【问题标题】：How to keep centered image in between two <div>'s如何在两个 <div> 之间保持居中图像
【发布时间】：2013-12-24 00:16:42
【问题描述】：

我有以下设计，其中我在两个<div> 之间有一个图像。我的目标是保持两个 div 之间的图像。

在本例中，我希望主图像 (400x200) 位于绿色图像 (#firstLayer) 和灰色图像（主体背景）之间。我的解决方案在 Firefox 16、safari 和 Chrome 中运行良好，但在 IE 中不起作用。在 IE 中，图像显示在 #firstLayer 之上。

这里是JFiddle的问题

这里是用于快速查看的 html 和 css：

HTML：

<body>
<div id="firstLayer">
  <img id="image" class="center" src="http://lorempixel.com/400/200/" >
         <div id="mainContent">
          main page content
         </div>
  </div>
</body>

CSS：

body{
 background:gray;  
}
#firstLayer{
    background: url("http://www.enough.de/fileadmin/docimport/images/background-image.png") no-repeat;

    height:500px;
    width:500px;

}
img#image{
 z-index:-1; 
}

.center{
    width: 400px;
    height: 200px;
    position: absolute;
    left: 50%;
    top: 50%;
    margin-left: -200px;
    margin-top: -100px;
}

IE 中这个问题的修复方法是什么？

【问题讨论】：

这是您想要实现的目标吗？ jsfiddle.net/vW9bn/9
在 IE 中存在一个错误，如果元素是相对定位或绝对定位，它将忽略 z-index：stackoverflow.com/questions/2473171/… 我建议将“位置：相对”放在你的 #firstLayer div 上以保持它在顶部，如果这是你想要达到的目标。
@AndrewPope：你完全理解 vineetrok 想要达到的目标吗？
@AaronBrewer 不，看，忽略我添加的不透明度，我只希望图像位于主体背景和 IE 中的 #firstLayer 之间
@AaronBrewer：参考这个jsfiddle.net/vW9bn/11，在firefox中查看，我希望在IE中也一样

标签： html internet-explorer css

【解决方案1】：

尝试将position:relative; 添加到您的#firstlayer div：

#firstLayer {
    position: relative;
}

这与 IE 中的一个错误有关，它会忽略图像上的 z-index，因为它是绝对定位的，添加相对于父 div 的位置可以解决这个问题。

【讨论】：

【解决方案2】：

试试这样的。

 <div id="firstLayer" style="width:700px;height:700px;text-align:center;">
         <center>   <img id="image" class="center" src="My_Signature.jpg" 
                                   style="width:400px;height:200px;" > </center>
         <div id="mainContent">
          main page content
         </div>
  </div>

希望对您有所帮助。干杯。！！

【讨论】：

【解决方案3】：

要使图像居中，您可以尝试 2 个选项：

1- 将您的图像放在“中心”标签内。

例如：<center><img id="image" class="center" src="http://lorempixel.com/400/200/" ></center>

2- 在你的图片上使用这个 css 类。

img.center{ display: block; margin: 0 auto;}

【讨论】：

我的问题是图像没有居中，我已经做到了，我想把它放在身体和#firstLayer 部门之间
我还想指出，已弃用 HTML，建议使用 CSS 替代方案。