fabimetabi fabimetabi - 1 year ago 89
CSS Question

Center <div> inside a <div>

Code: https://jsfiddle.net/z4udfg3o/

I want the divs "caixa" to be centered in the div "produtos". I was able to do it with exact values using

margin-left
. But I want it to be responsive for other screen sizes so I putted
margin-left
and
margin-right
as
auto
.

Image of desired format:


Answer Source

Use this CSS:

.produtos {
    width: 100%;
    background: gray;
    margin-left: auto;
    margin-right: auto;
    display: inline-block;
}

.caixa {
    width: 27.1%;
    height: 250px;
    background: darksalmon;
    border: 1px solid #000;
    float: left;
    margin: 0 3%;
}
Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download