Question

我试图通过包裹一个外部div并使其居中来试图使两个div居中：

<div style="margin-left:auto;margin-right:auto;">

但是div仍然保持左对齐。我怎样才能将这些div放在页面上？

小提琴代码：

HTML：

<div style="margin-left:auto;margin-right:auto;">
<div id="block">
<img height="50" style="max-width: 50px;background-position: top left;" src="http://socialmediababe.com/wp-content/uploads/2010/12/administrator.jpg" />


<div style="font-size:20px;font-weight:bold;">
Test
</div>
<div>
<a href="http://www.google.com">Google</a>
</div>

</div>

<div id="block">
<img height="50" style="max-width: 50px;background-position: top left;" src="http://socialmediababe.com/wp-content/uploads/2010/12/administrator.jpg" />


<div style="font-size:20px;font-weight:bold;">
Test
</div>
<div>
<a href="http://www.google.com">Google</a>
</div>

</div>
</div>

CSS：

*{
    margin:0;
    padding:0;
}
#block { 
    margin-right:100px;
    border-width: 2px; 
    border-color: #4682B4; 
    background-color: WHITE; 
    width: 100px; 
    text-align: center; 
    line-height:30px;
    padding:3px 0;
    float:left;
}
img{
float:left;
}
#block:hover {
  background-color: #C2DFFF ;
}

Answer 1

默认情况下，

div是一个块级元素，因此如果您没有为其分配一些width，它将占用100％的水平空间，因此您需要指定一些width到你的容器

<div style="margin-left:auto;margin-right:auto; width: 300px;">

在这里，您可以相应地设置宽度。另请避免使用inline CSS。

你的CSS很邋，例如margin-right:100px;不是必需的，你也可以使用简写

margin: 0 auto; = margin-left:auto; margin-right:auto;

Demo（添加了红色边框以显示边界）

注意：您正在浮动您的元素，因此请确保使用我在演示中已经完成的<div style="clear: both;"></div>来清除浮动，否则您也可以使用下面的代码片段来清除父级像

.clear:after {
   display: table;
   clear: both;
   content: "";
}

Answer 2

为该容器指定宽度。

#outerdiv{
margin-left:auto;margin-right:auto;
width:500px;
}

Answer 3

<div align="center">
   <!-- -staff ->
</div>

Answer 4

除非指定宽度，否则

margin:auto;不起作用...

<div style="margin:auto;width:100px;">

your content here. [Replace the width with your choice]

</div>

Answer 5

给予宽度和边距自动会将内容集中在指定的宽度中。

 <div style="margin-left:auto;margin-right:auto;width:400px;">//give variable width here..Normally 1000 to 1018..
<div id="block">
<img height="50" style="max-width: 50px;background-position: top left;" src="http://socialmediababe.com/wp-content/uploads/2010/12/administrator.jpg" />


<div style="font-size:20px;font-weight:bold;">
Test
</div>
<div>
<a href="http://www.google.com">Google</a>
</div>

</div>

<div id="block">
<img height="50" style="max-width: 50px;background-position: top left;" src="http://socialmediababe.com/wp-content/uploads/2010/12/administrator.jpg" />


<div style="font-size:20px;font-weight:bold;">
Test
</div>
<div>
<a href="http://www.google.com">Google</a>
</div>

</div>
</div>

Answer 6

喜欢这个

<强> DEMO

<强> CSS

.container{
    width:960px;
    margin:0 auto;
    text-align:center;
    border:1px solid red;

}

如何将div放在页面上

6 个答案: