2016-08-14 104 views
-3

我正在使用w3.css,我想制作一个宽度为100%的彩色背景,
并在其中放置另一个宽度为80%的盒子,其中包含文本,所以就用以下:W3.CSS如何使容器居中在另一个容器内

<div class="w3-container w3-light-green"> 
<div class="w3-container w3-sand w3-center" style="width:80%"> 
test 
</div> 
</div> 

的问题是,与80%的宽度的第二容器中的页面不居中虽然我用W3-中心。 我注意到w3-centre只是文本的中心,但是容器本身没有居中,所以我怎样才能将容器块居中呢?

+0

您能否提供至少一项来自您的工作,以便我们可以帮助您解决代码中的问题? –

+0

我现在编辑我的帖子 –

+0

添加小提琴或代码段代码,所以我们可以帮助你出来.. – Abhishek

回答

0

我认为这应该工作..试试看..

<div class="w3-container w3-light-green"> 
<div class="w3-container w3-sand w3-center" style="width:80%;margin:auto;"> 
test 
</div> 
</div> 
+0

它的确如此,非常感谢你 –

-1

我不知道很多关于w3.css有可能是原生解决这一点,但如果你喜欢有哈克事情是这样的:

<!DOCTYPE html> 
<html> 
<meta name="viewport" content="width=device-width, initial-scale=1"> 
<link rel="stylesheet" href="http://www.w3schools.com/lib/w3.css"> 
<body> 
<div class="w3-container w3-light-green" style="text-align: center"> 
<div class="w3-container w3-sand w3-center" style="width:80%; display: inline-block;"> 
test 
</div> 
</div> 
</body> 
</html> 

https://jsfiddle.net/k2j676ba/

+0

仇恨者会讨厌。尊重答案如果你觉得没有用,那么解释一下为什么在你downvote –

+0

感谢所有的帮助,这是我第一次在这里在stackoverflow,所以我不知道这里很多,但我没有downvote任何人,我只是一个答案因为它解决了我的问题。 –

+0

我没有提到你或任何人。我很高兴你解决了你的问题。祝你有美好的一天。 –

0

W3.CSS没有类定心块元素。唯一具有其他效果的类也是如此。

您需要设置左右页边空白才能自动运行。

相关问题