1

嘿伙计们，我根本无法让它发挥作用。

我有一些使用边距以页面为中心的内容：auto; “诡计”。

在这个内容中，我有一个图像。我需要在图像下方制作一个彩条，一直延伸到浏览器的两侧。在右侧，我需要它看起来像是出现在图像上。

我制作了这张图片以尝试以图形方式显示我的意思：图片

如您所见，该栏从浏览器的左侧运行到右侧。居中的图像只是放在它的顶部，然后一个图像位于图像的顶部。但我无法让这个工作。有谁愿意试一试吗？

我尝试将条形相对定位和 z-index 定位低。这行得通，但酒吧在 IE 7-8-9 中不断跳来跳去。将图像居中也不容易，将较小的图像放在顶部就更难了。如果您调整它的大小，它不会跟随浏览器。这里的问题是用户必须能够上传新图片，所以我不能只制作静态图片。

请帮助我真的迷路了

编辑：

尝试了下面的示例，但是当我在 IE 7-8-9 中运行该站点时，我得到了不同的结果。关联

4

2 回答 2

2

我制作了一个应该在 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 控制元素的堆叠方式。

于 2012-06-27T18:43:45.957 回答
-2

我用 css 使任何东西居中的方法是：

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

'left' 必须具有您的宽度，然后将其设为负值。
到目前为止，我还没有遇到任何问题。

于 2012-06-27T18:23:45.053 回答