Question

我有以下内容：

我希望将五个圆圈居中，这样它们就可以与父级div对齐，并且它们之间具有相同的填充。我尝试了几个方面，根据div宽度为它们设置左边距。但它不是很有效。 HTML和CSS如下：

<div class="container-fluid">
            <div class="row">
                <fieldset>
                    <legend>Veja como é fácil participar</legend>

                    <!--CÍRCULO AMARELO-->
                    <div class="col-lg-2 col-md-6 col-sm-12 col-xs-12">
                        <div class="circles circle-yellow">
                            <img class="img-responsive" src="\galeria\repositorio\images\landing\mensalidades-iguais\money.png">
                            <p>Mensalidades que cabem no seu bolso</p>
                        </div>
                    </div>

                    <!--CÍRCULO VERMELHO-->
                    <div class="col-lg-2 col-md-6 col-sm-12 col-xs-12">
                        <div class="circles circle-red">
                            <h1>12x</h1>
                            <p>parcelas iguais</p>
                        </div>
                    </div>

                    <!--CÍRCULO AZUL CLARO-->
                    <div class="col-lg-2 col-md-6 col-sm-12 col-xs-12">
                        <div class="circles circle-light-blue">
                            <p>curso</p>
                            <span>R$</span>
                            <h1>162</h1>
                            <p>mensais</p>
                            <small>R$ 1.944,00 ANUAL</small>
                        </div>
                    </div>

                    <!--CÍRCULO AZUL CIANO-->
                    <div class="col-lg-2 col-md-6 col-sm-12 col-xs-12">
                        <div class="circles circle-blue">
                            <p>material didático</p>
                            <span>R$</span>
                            <h1 class="blue-parcelas">37</h1>
                            <p>mensais</p>
                            <small>R$ 444,00 ANUAL</small>
                        </div>
                    </div>

                    <!--CÍRCULO AZUL ESCURO-->
                    <div class="col-lg-2 col-md-12 col-sm-12 col-xs-12" >
                        <div class="circles circle-dark-blue">
                            <p>total</p>
                            <span>R$</span>
                            <h1>162</h1>
                            <p>mensais</p>
                            <small>R$ 1.944,00 ANUAL</small>
                        </div>
                    </div>    
                </fieldset>
            </div>
        </div>

CSS：

    .circles {
    height: 200px;
    width: 200px;
    -webkit-border-radius: 40px;
    -moz-border-radius: 40px;
    border-radius: 200px;
    margin: 0 auto;
    text-align: center;
    padding: 20px;
    display: inline-block;
    margin-top: 20px;
}

.circle-yellow {
    background-color: rgb(249, 235, 74);
}

.circle-yellow img {
    margin: 0 auto;
}

.circle-yellow h1 p {
    color: rgb(90, 88, 86);
}

.circle-yellow img {
    width: 50px;
}

.circle-yellow p {
    font-size: 20px;
    margin: 0;
    text-align: center;
}

.circle-red {
    background-color: rgb(216, 3, 25);
}

.circle-red img {
    margin: 0 auto;
    margin-left: 25%;
}

.circle-red h1 {
    padding-top: 15px;
    font-weight: bold;
    font-size: 60px;
    margin: 0;
    color: white;
}

.circle-red p {
    font-size: 33px;
    line-height: 30px;
    margin: 0;
    padding-left: 12px;
    text-align: center;
    color: white;
}

.circle-light-blue {
    background-color: rgb(183, 219, 231);
}

.circle-light-blue p:first-of-type {
    text-align: center;
    font-size: 32px;
    margin: 0;
    color: rgb(90, 88, 86);
}

.circle-light-blue p {
    text-align: center;
    font-size: 32px;
    margin: 0;
    margin-top: -10px;
    color: rgb(90, 88, 86);
}

.circle-light-blue span {
    text-align: center;
    font-size: 40px;
    margin: 0;
    color: rgb(90, 88, 86);
}

.circle-light-blue h1 {
    font-weight: bold;
    display: inline;
    font-size: 42px;
    top: 20%;
    margin: 0;
    color: rgb(90, 88, 86);
}

.circle-light-blue small {
    text-align: center;
    text-align: center;
    margin: 0;
    color: rgb(90, 88, 86);
}

.circle-blue {
    background-color: rgb(68, 110, 182);
}

.circle-blue h1 {
    font-weight: bold;
    font-size: 52px;
    top: 20%;
    margin: 0;
    color: white;
    display: inline;
}

.circle-blue span {
    text-align: center;
    font-size: 32px;
    color: white;
}

.circle-blue small {
    text-align: center;
    text-align: center;
    margin: 0;
    color: white;
}

.circle-blue p:first-of-type {
    text-align: center;
    font-size: 20px;
    font-weight: bold;
    margin: 0;
    color: white;
    margin-top: 20px;
}

.circle-blue p {
    text-align: center;
    font-size: 20px;
    font-weight: bold;
    margin: 0;
    color: white;
}

.circle-dark-blue {
    background-color: rgb(35, 50, 83);
}

.circle-dark-blue h1 {
    font-weight: bold;
    font-size: 52px;
    top: 20%;
    margin: 0;
    color: white;
    display: inline;
}

.circle-dark-blue p:first-of-type {
    text-align: center;
    font-size: 22px;
    font-weight: bold;
    margin: 0;
    color: white;
}

.circle-dark-blue p {
    text-align: center;
    font-size: 32px;
    font-weight: bold;
    margin: 0;
    padding-left: 5px;
    color: white;
    text-transform: none !important;
}

.circle-dark-blue span {
    top: 0;
    text-align: center;
    font-size: 22px;
    margin: 0;
    color: white;
}

.circle-dark-blue small {
    text-align: center;
    text-align: center;
    margin: 0;
    color: white;
}

Answer 1

您正在容器上使用响应式列类，这表明您可能还需要与组件关联的某种响应行为以及以这种方式居中的内容。根据您的需要，您可能需要相应地调整解决方案。

我将描述一些简单的方法，你可能会忘记响应行为，并假设你的组件有足够的宽度用于所有圈子。

Flexbox将以一种微不足道的方式实现这种定位。

如果由于浏览器兼容性或其他因素，您无法在此项目中使用Flexbox，这里有低保真替代方案：

具有文本对齐中心的父级中的内联块元素

如果您只想将内容集中在一起并将它们分开，但如果它们均匀分布并不重要，您可以这样做：

将父容器的text-align属性设置为...

.container { text-align: center; }

将容器内圆圈的显示设置为...

.circle {
    display: inline-block;
    margin: 0 10px 0 20px;
}

然后在它们的任何一侧添加保证金。

每个圈子都集中在容器中，占据了父级的均匀分数

如果重要的是圆圈之间的空间相等，并且没有明确定义父容器的大小（根据内容而有所不同），那么这是另一种方法：

将每个圆圈放在它自己的容器中，就像你现在一样，但是放弃了引导类。

通过将圆圈的显示设置为内联块并将父级的文本对齐设置为中心，将圆圈置于该圆圈内容中，如上一个解决方案中所述。或者，如果合适，您可以使用margin: 0 auto;方法。

然后将父circle_containers的宽度定义为等于1 / X的百分比，其中X是圆的数量。在上图中，您显示5，表示您的百分比为1/5，等于20％。

然后必须将这些容器向左漂浮，然后再用＆＃34; clearfixed＆＃34;而不是使用内联块水平放置，因为内联块在彼此相邻的元素之间创建了小空间。这意味着虽然组件的宽度为20％，但这些添加的空间的总宽度将大于100％，并且项目将换行到新的行。

<强> e.g。

HTML

<div class="container">
    <div class="circle-container">
        <div class="circle"></div>
    </div>
    <div class="circle-container">
        <div class="circle"></div>
    </div>
    <div class="circle-container">
        <div class="circle"></div>
    </div>
    <div class="circle-container">
        <div class="circle"></div>
    </div>
    <div class="circle-container">
        <div class="circle"></div>
    </div>
</div>

CSS

.container {
    width: 100%;
}
// This clearfix implementation works IE8 and up.
.container:after {
    content: "";
    display: table;
    clear: both;
}
.circle-container {
    display: block;
    float: left;
    width: 20%;
}
.circle {
    border-radius: 50%;
    background-color: blue;
    width: 100px;
    height: 100px;
    margin: 0 auto;
}

Answer 2

您已将css属性display:block添加到.circles类，将text-align:center添加到父级或这些圈子中。

中心DIVS在其父级内部使用相同的填充

2 个答案: