how to align div's horizontally in CSS

问题

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.

Markup Code:

 <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;
 }

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

Code on jsfiddle: jsfiddle

回答1:

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%;
}

回答2:

Please use display: inline-block;

http://jsfiddle.net/K6PKK/

回答3:

try this:

div.clearfix {
    display : table;
}

div.circle {
    display : table-cell;
}

来源：https://stackoverflow.com/questions/24857935/how-to-align-divs-horizontally-in-css

标签

html

css

responsive-design