Question

<html>

<head>
  <style type="text/css">
    #circles {
      text-align: center;
    }
    .circle {
      width: 30px;
      height: 30px;
      border-radius: 50%;
      background-color: blue;
      float: left;
    }
  </style>
</head>

<body>
  <div id="circles">
    <div class="circle"></div>
    <div class="circle"></div>
    <div class="circle"></div>
  </div>
</body>

</html>

我尝试过使用margin: 0 auto和text-align: center，但这些方法似乎都没有将内部div作为中心。有谁知道我做错了什么？

Answer 1

使用display:inline-block代替float。

#circles {
  text-align: center;
}

.circle {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background-color: blue;
  display: inline-block;
}

<div id="circles">
  <div class="circle"></div><!--
  --><div class="circle"></div><!--
  --><div class="circle"></div>
</div>

Answer 2

您已float:left .circle删除它并添加display:inline-block。

Answer 3

因为你正在使用div属性显示是块。然后你尝试使用text-align：center将它居中，但你也要保持对齐它。将display设置为inline-block并删除float属性。

Answer 4

试试这个：

＆＃13;

.container{
    width: 100%;
    text-align: center;
}
#circles
{
  display: inline-block;
}
.circle
{
    width:30px;
    height: 30px;
    border-radius: 50%;
    background-color: blue;
    float: left;
}

＆＃13;

<div class='container'>
   <div id = "circles">
     <div class = "circle"></div>
     <div class = "circle"></div>
     <div class = "circle"></div>
   </div>
</div>

＆＃13;

在这里小提琴：http://jsfiddle.net/rrzu3a1w/

Answer 5

在将margin设置为自动

之前，请尝试为div增加宽度

#your_div {
  width: 700px ;
  margin-left: auto ;
  margin-right: auto ;
}

Answer 6

你有一个浮动：留在你的班级.circle所以.circle divs没有听他们父母的文本对齐中心。移除左边的浮动并改为使用显示内联块。

文本对齐或边距0自动两个不工作中心div

6 个答案: