2

在这个小提琴中：http: //jsfiddle.net/H4F8H/16/

我试图通过包装一个外部 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 ;
}
4

7 回答 7

1

div默认情况下是块级元素，所以如果你不给它分配一些，它会占用100%的水平空间width，所以你需要给width你的容器分配一些

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

在这里，您可以相应地设置宽度。还要避免使用inlineCSS。

你的 CSS 有点草率，例如margin-right:100px;不是必需的，你也可以使用简写，比如

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

演示（添加红色边框只是为了显示边界）

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

.clear:after {
   display: table;
   clear: both;
   content: "";
}
于 2013-08-26T11:24:11.193 回答
1

我想在这篇文章中指出几件事：

  1. 您已经设置Id="block"了两个不同的实例。ID 是唯一的。如果你想要一个可重用的标识符，你应该使用类。

  2. 应尽可能避免使用内联样式。在这种情况下，不需要在父 div 上设置内联样式。

将 div 居中的方法不止一种，我将在此处留下此链接：http: //thenewcode.com/723/Seven-Ways-of-Centering-With-CSS

这将是我的解决方案：

html:

<div class="container">

  <div class="block">
    <span>Test</span>
  </div>

  <div class="block">
    <span>Test 2</span>
  </div>
  
</div>

CSS：

.container {
  display: flex;
  justify-content: center;
  align-items: center;
}

.block {
  display: flex;
  background: grey;
  width: 30%;
  height: 200px;
  border: 1px solid #777;
  margin: 5px;
}
于 2021-09-28T14:58:29.300 回答
0

给那个容器一个宽度。

#outerdiv{
margin-left:auto;margin-right:auto;
width:500px;
}
于 2013-08-26T11:22:59.063 回答
0 
<div align="center">
   <!-- -staff ->
</div>
于 2013-08-26T11:26:18.220 回答
0

margin:auto;除非指定宽度，否则不起作用...

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

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

</div>
于 2013-08-26T11:31:48.770 回答
-1

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

 <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>
于 2013-08-26T11:26:01.270 回答
-1

像这样

演示

CSS

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

}
于 2013-08-26T11:28:58.817 回答