Question

我有以下设计，其中我有两个<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中此问题的修复是什么？

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>的</div>之间

3 个答案: