如何定位div制作“盒子”与HTML

Question

我试过对齐，位置和其他。这个问题可能不会被发现，因为我会觉得相对于这个讨论<div>“功能”的话题，但我需要为div{}

这里的解决方案是我的代码：

div{background-color: White; opacity:0.7; width: 380px; height: 325px;} 

那么，如何定位它在一个特定的位置，甚至使用简单的关键字，如对齐中心等。我试过align:center;和position:center;（出于好奇），但没有做过我认为会做的事。那么，我该如何做到这一点？

Answer 1

您可以尝试使用位置，顶部和左侧将您的div放在任何你想要的地方。就像这样：

div{ 
    background-color: #000; 
    opacity:0.7; 
    width: 380px; 
    height: 325px; 
    position: relative; 
    top: 200px; 
    left: 300px; 
} 

如果你希望你的div居中，您还可以用保证金玩：

margin: 0px auto;  

Answer 2

有很多方法的，可以作出这样.main-container和位置的其他类通过保证金像

.main-container 
{ 
margin-left:200px; 
} 

现在

在HTML写mainContainer上类中的格状

<div class="main-container"> 
{ 
<div class="your class here"> 

your data 
</div> 
</div> 

你也可以玩保证金，谷歌它的更多信息...

这是最简单和容易的方式来申请以及了解，希望它将解决问题...

Answer 3

你们是不是要居中的div？根据您的最后一句话：“align：center; and position：center;”这听起来像。因为你定义的宽度已经和假设其他样式不妨碍以下应工作中心您的div：（注意边缘）

div { background-color: White; opacity:0.7; width: 380px; height: 325px; margin:0 auto; } 

否则，如果您正试图位置的div其他地方，做绝对和静态的位置搜索。

Answer 4

试试这个：

.My_div { 
position: absolute; 
left: 50%; 
margin-right: -50%; 
transform: translate(-50%, -50%); 
} 

下面是一些例子！ http://www.w3.org/Style/Examples/007/center.en.html#vertical