如何将居中的图像保持在两者之间 <div> 的

Question

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

在这个例子中，我希望主图像（ #firstLayer ）位于绿色图像（ #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中此问题的修复是什么？

Answer 1

尝试这样的事情。

 <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>

希望，它会帮助你。 干杯。 ！

Answer 2

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

#firstLayer {
    position: relative;
}

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

Answer 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;}

如何将居中的图像保持在两者之间 <div> 的

问题描述

3 个解决方案

解决方案1
1 2012-11-01 16:43:27

解决方案2
1 已采纳 2012-11-02 09:38:40

解决方案3
0 2012-11-01 16:25:34

如何将居中的图像保持在两者之间 <div> 的

问题描述

3 个解决方案

解决方案1 1 2012-11-01 16:43:27

解决方案2 1 已采纳 2012-11-02 09:38:40

解决方案3 0 2012-11-01 16:25:34

解决方案1
1 2012-11-01 16:43:27

解决方案2
1 已采纳 2012-11-02 09:38:40

解决方案3
0 2012-11-01 16:25:34