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

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 文字3的段落中的旗帜，我必须对齐在包装的中间在我的决议显示在中间，但在一个更高的分辨率，例如它显示在左边。我认为它是因为当我与左对齐它：28,5％它后面的HTML尺寸至少是100％宽度。所以我的问题是：我应该如何写封装，以便内容定位在它之后？如何使内容在包装后对齐？

来源

2013-06-11 Lebada Petru

你会怎样真的喜欢的内容进行定位？在中间还是向左？ – Charx

我希望它在g_image5这是包装的背景 –

请不要使用内联样式 – acudars

你的情况

的问题是这样的组合：

#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-07 13:07:56 acudars

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

回答

相关问题