CSS将图像放置在每个顶部，并制作中心栏

Question

嘿，伙计们，我就是不能让它工作。

我有一些使用页边距的居中内容:自动；“技巧”。

在这篇文章中，我有一张图片。我需要使一个颜色条在图像下继续到浏览器的侧面。在右边，我需要它看起来像它在图像上。

我制作这张图片是为了图形化地展示我的意思：image

正如您所看到的，该栏从浏览器的左侧向右侧排列。将居中的图像放在它的顶部，然后在图像的顶部放置一个图像。但我一直没能让它正常工作。有人愿意试一试吗？

我试着将条相对和z-index定位在较低的位置。这起作用了，但是在IE 7-8-9中，栏一直跳来跳去。将图像居中也不容易，将较小的图像放在顶部就更难了。如果你调整它的大小，它不会跟随浏览器。这里的问题是，用户必须能够上传一个新的图片，所以我不能只做一个静态图片。

请帮帮忙，我真的迷路了

编辑：

我尝试了下面的例子，但当我在IE7-8-9中运行站点时，我得到了不同的结果。link

Answer 1

我已经做了一个可以在Chrome和IE7-9上工作的jsFiddle：http://jsfiddle.net/7gaE9/

HTML

<div id="container">
<div id="bar1"></div>
<img src="http://placekitten.com/200/300"/>
<div id="bar2"></div>
</div>​

CSS

#container{
   width: 100%;
    margin: 0 auto;   
    background-color: red;
    text-align: center;
    position: relative;
}
#bar1{
    background-color: blue;
    position: absolute;
    top: 50%;
    right: 0;
    z-index: 1;
    height: 30px;
    width: 40%;
}
#bar2{
    background-color: blue;
    top: 50%;
    left: 0;
    z-index: 3;
    height: 30px;
    width: 40%;
    position: absolute;
}
img{
    text-align: center;
    z-index: 2;
    position: relative;
}
​
​

这里的关键是容器是相对定位的，从而允许子元素相对于其父元素的绝对定位。使用z-index控制元素的堆叠方式。

Answer 2

我用css居中的一种方法是：

    .yourclass {
    width:500px;
    position:absolute;
    margin-left:50%;
    left:-250px;
    }

“‘left”必须为您的宽度，然后将其设为负数。

到目前为止，我还没有遇到任何问题。