Question

我在容器中有三个子div，我想水平对齐这些div。我尝试使用css float属性，但圆圈变成椭圆形。

标记代码：

 <div class="container info-box clearfix">
   <div class="circle">
     <div class="content">
       <h3>Learn at your own Pace</h3>
    </div>
  </div>
  <div class="circle">
    <div class="content">
      <h3>Methodic learning</h3>
    </div>
  </div>
  <div class="circle">
    <div class="content">
      <h3>Unique Approach</h3>
    </div>
  </div>
</div>

CSS：

.circle {
  position: relative;
  background-color: #3cb371;
  border-radius: 50%;
  padding: 5px 10px;
  width: 20%;
}

.content {
  position: absolute;
  top: 0; right: 0; bottom: 0; left: 0;
  overflow: auto;
}

.circle:before {
  content: '';
  display: block;
  margin-top: 100%; /* 1:1 ratio */
}

.clearfix:before, .clearfix:after{
  content: " ";
  display: table;
}

.clearfix:after{
  clear: both
}

.info-box{
  margin-top: 20px;
  width:100%;
}

.container{
  margin-left: auto;
  margin-right: auto;
  padding-left:15px;
  padding-right:15px;
  text-align:center;
}

*{
   box-sizing: border-box;
 }

我尝试使用float属性，但圆圈变成了椭圆形。请让我知道我哪里出错了。

jsfiddle上的代码：jsfiddle

Answer 1

由于您应用了填充属性，圆圈变为椭圆形。只需删除填充：5px 10px;并添加float：left;在圈子里。

.circle {
    position: relative;
    background-color: #3cb371;
    border-radius: 50%;
    float: left;
    width: 20%;
}

Answer 2

请使用display: inline-block;

http://jsfiddle.net/K6PKK/

Answer 3

试试这个：

div.clearfix {
    display : table;
}

div.circle {
    display : table-cell;
}

如何在CSS中水平对齐div

3 个答案: