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

查看：32
本文介绍了如何在 CSS 中水平对齐 div's的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

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

标记代码:

 
<div class="circle"><div class="内容"><h3>按照自己的节奏学习</h3>

<div class="circle"><div class="内容"><h3>有条不紊的学习</h3>

<div class="circle"><div class="内容"><h3>独特的方法</h3>

CSS:

.circle {位置:相对；背景颜色:#3cb371；边界半径:50%；填充:5px 10px；宽度:20%；}.内容 {位置:绝对；顶部:0；右:0；底部:0；左:0；溢出:自动；}.circle:before {内容: '';显示:块；保证金最高:100%；/* 1:1 比例 */}.clearfix:before, .clearfix:after{内容: " ";显示:表；}.clearfix:之后{明确:两者}.信息框{边距顶部:20px；宽度:100%；}.容器{左边距:自动；右边距:自动；填充左:15px；填充右:15px;文字对齐:居中；}*{box-sizing: 边框框；}

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

jsfiddle 上的代码:jsfiddle

解决方案

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

.circle {位置:相对；背景颜色:#3cb371；边界半径:50%；向左飘浮;宽度:20%；}

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

解决方案

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&amp;#39;s的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文
相关文章
前端开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆