如何在CSS中水平对齐div [英] how to align div's horizontally in CSS

问题描述

我在一个容器内有三个子div，我想水平对齐这些div.我尝试使用css float 属性，但是圆圈变得椭圆形.

I have three child divs inside a container and I want to align these div's horizontally. I tried using the css float property but the circles are becoming oval.

标记代码:

 <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属性，但是圆圈变成了椭圆形.请让我知道我要去哪里了.

I tried using the float property but the circles are turning into oval. Please let me know where I am going wrong.

jsfiddle上的代码: jsfiddle

Code on jsfiddle: jsfiddle

推荐答案

由于您应用了padding属性，圆形正变得椭圆形.只需删除填充:5px 10px;并添加float:left;在圈子课程中.

Circles are becoming oval because of padding property you have applied. just remove padding: 5px 10px; and add float:left; in the circle class.

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

这篇关于如何在CSS中水平对齐div的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！