Center DIVS inside their parent with the same padding between

Question

I have the following content:

And I want to center the five circles so they are align with the parent div in widht and with the same padding between them. I tried a couple of things, as setting a margin to the left for them based on the div width. But it's not very effective. The HTML and CSS follows:

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

that's a `flex-box` solution, take a look at `display:flex` on container — Jordi Flores, Jan 30 '18 at 13:09
Your code is not like the image. Create a stacksnippet `<>` so we can run and see your code. Right now it looks like this: https://jsfiddle.net/aaL1kb1c/ — caramba, Jan 30 '18 at 13:10
Your main stylesheet is missing, yes. Whatever bootstrap override you did on the fieldset tag isn't included in what you provided so far. — Tiramonium, Jan 30 '18 at 13:23
Possible duplicate of [How to horizontally center a
in another
?](https://stackoverflow.com/questions/114543/how-to-horizontally-center-a-div-in-another-div) — Rob, Jan 30 '18 at 14:00

HellaWiggly · Accepted Answer · 2018-01-31T09:00:06.760

You are using responsive column classes on the containers which suggests you might also want some kind of responsive behaviour associated with the component as well as centering the content in this way. Depending on what that is you might need to adapt your solution accordingly.

I'm going to describe a couple of simple ways you might do this forgetting about responsive behaviour and assuming that your component has sufficient width for all the circles.

Flexbox would enable this positioning in a trivial way.

If due to browser compatibility or other factors you can't utilise Flexbox in this project here are low-fi alternatives:

Inline-block Elements in a Parent with Text Aligned Center

If you want to just center the content and have some separation between them, but it doesn't matter if they are evenly distributed, you can do that like this:

Set the parent container's text-align property to...

.container { text-align: center; }

Set the display of the circles inside the container to...

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

and then adding margin to either side of them.

Each Circle Centered in a Container which Occupies an Even Fraction of the Parent

If it is important that the space between the circles is equal, and the size of the parent container is not explicitly defined (varies based on content), then here is another approach:

Put each circle inside it's own container, like you have now but ditch the bootstrap classes.

Center the circle inside that circle_container by setting the circle's display to inline-block and the text-align of the parent to center as described in the last solution. Alternatively if appropriate you can use the margin: 0 auto; method.

Then define the width of the parent circle_containers to be a percentage equal to 1/X where X is the number of circles. In the image above you display 5, meaning your percentage will be 1/5 which equals 20%.

These containers must then be floated left and later "clearfixed" rather than positioned horizontally using inline-block because inline-block creates small spaces between elements beside one another. This means that although the width of your component is 20% the total width with these added spaces will be greater than 100% and items will wrap onto a new line.

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

score -1 · Answer 2 · answered Jan 30 '18 at 13:11

-1

You already have css property display:block added to the .circles class add text-align:center to the parent or these circles.

answered Jan 30 '18 at 13:11

janjua

31
5

Center DIVS inside their parent with the same padding between

2 Answers2