1

我正在尝试定位内容： g_image5 我将它用作整个包装器的背景 image7 它是 g_image5 上的横幅 text3 它是一个段落，我将它对齐在包装器的中间 在我的分辨率上它显示在中间，但在更高的分辨率上，例如它显示在左侧。我认为这是因为当我将它与 left:28,5% 对齐时，它会跟随 100% 宽度的 html 大小。所以我的问题是：我应该如何在包装上写，以便将内容定位在它之后？

html
{
    width:100%;
    height:100%;
    overflow-y:auto;
}

<div id="wrapper" width=100% z-index:-1>
    <div id="g_image5" style="position:absolute; overflow:hidden; left: 23%; top: 18%;   
width:55%;  z-index:0"><img src="images/content2.jpg" alt="" title="" border=0   
width=100% height=150%></div>
    <div id="image7" style="position:absolute; overflow:hidden; left:38%; top:20%;    
width:25%; height:13%; z-index:3"><img src="images/2.png" alt="" title="" border=0  
width=100% height=100%></div>
    <div id="text3" style="position:absolute; overflow:hidden; left:28.5%; top:40%;      
width:50%; height:20%; z-index:3">
        <div class="wpmd">
            <div><font face="Tahoma" class="ws13">Here is a paragraph and here's also the problem</font></div>
      </div>
    </div>
</div>
4

1 回答 1

0

在您的情况下，问题出在这种组合上：

#g_image5 {
    width: 55%;
    left: 23%;
    top: 18%;
}

相反，你应该做这样的事情，这将使你的包装内的所有元素和水平的文本居中：

#wrapper {
    text-align: center;
}

然后要获得可缩放的图像，只需按照以下方式进行操作：

#g_image5 {
    width: 70%;
    height: auto;
}

另一种方法是避免整体使用img并在 CSS 中使用图片作为背景：

#g_image5 {
    background: url(/*path to your img */) no-repeat center center;
}
于 2013-08-07T13:07:56.630 回答