Align multiple Divs horizontally within a container

Question

I have several div with float: left inside another div, which is their container, according to code:

<div id="container">
    <div id="box-1" class="box">1</div>
    <div id="box-2" class="box">2</div>
    <div id="box-3" class="box">3</div>
</div>

I’m trying to align them horizontally inside the container (as shown below), but I’m not getting it.

Well, I can’t make it work. Follow my CSS and then the result I’m getting.

#container {
    width: 100%;
    border-color: blue;
    text-align: center;
}

.box {
    float: left;
    width: 100px; height: 200px;
    margin: 10px 20px;
}

#box-1 { background-color: red; }
#box-2 { background-color: green; }
#box-3 { background-color: pink; }

Divs aren’t getting aligned like I assumed it would when using text-align: center in the container. How to achieve the expected result?

Jsfiddle

Answer 1

To get the desired result, I needed to understand what elements with float escape the page rendering flow and become independent elements (within limitations of position, margin, padding, etc.).

To solve the problem, we just had to replace the attribute float: left for display: inline-block in class .box:

.box {
    display: inline-block;
    /* o resto permanece igual */
}

Thus, each of the DIV becomes an element in the page’s text stream (while maintaining its block behavior, which allows for setting width and height, for example). Thus we obtain the desired result and our DIVs are aligned centrally with the container:

Jsfiddle

---

The insight of this question came from a problem faced on a website I’m creating for a customer. As always, I’m sharing my knowledge (after verifying that such a question no longer existed) in order to assist my dear SOPT user partners.