如何使内容在包装后对齐？

Question

我试着定位内容：，g_image5，我使用它，就像整个包装器的背景image7，它是g_image5 text3上的横幅，它是一个段落，我把它对齐在包装器的中间，根据我的分辨率，它显示在中间，但如果分辨率更高，它显示在左边。我想这是因为当我将它与左对齐时:28.5%，它追求的是html大小，即100%的宽度。所以我的问题是:我应该如何在包装器上写东西，以便将内容定位在包装器之后？

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>

Answer 1

在您的例子中，问题出在这个组合上：

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