Question

Css:
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>

我试图定位内容： g_image5我用它就像整个包装器的背景 image7它是g_image5上的横幅 text3它是一个段落，我已将它对齐在包装器的中间在我的分辨率上，它显示在中间但是在更高的分辨率上，例如它显示在左边。我认为它是因为当我将它与左对齐时：28.5％它在html大小之后是100％宽度。所以我的问题是：我应该如何在包装器上书写以便将内容定位在它之后？

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

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

1 个答案: