text align或margin 0 auto都不适用于居中分隔

<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。有人知道我做错了什么吗？

使用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>

您在.circle中获得了float:left，将其删除并添加display:inline-block。

因为您使用的是div，所以哪个属性显示为块。然后，您尝试使用text-align:center将其居中，但也要左对齐。将display设置为inline block并删除float属性。

试试这个：

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

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

Fiddle here：http://jsfiddle.net/rrzu3a1w/

在将margin设置为自动之前，尝试给div一个宽度

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

您的类中有一个float：left。circle，因此.circlediv不会侦听其父级的文本对齐中心。删除左侧的浮动，改为使用显示内联块。

相关内容

最新更新

热门标签：