Center <div> inside a <div> - html

Question

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 1

section {
padding: 2em 0;
display: flex;
justify-content: space-between;
background: antiquewhite;
}
section:before, section:after {
content: "";
}
div {
width: 10em;
height: 10em;
background: silver;
}
<section>
<div></div>
<div></div>
<div></div>
</section>

Answer 2

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

Answer 3

Like This?
.produtos {
width: 100%;
height: 252px;
background: gray;
text-align: center;
}
.caixa {
width: 250px;
height: 250px;
background: darksalmon;
border: 1px solid #000;
margin: 0 auto;
}
<div class="produtos">
<div class="caixa">
<img src="imagens/croa.png" style="margin-left:60px;">
<p style="text-align:center;">Temos os melhores produtos do mercado! Nossos competidores ajoelham-se perante a nossa qualidade!</p>
</div>
<div class="caixa">
<img src="imagens/dinheiro.png" style="margin-left:60px;">
<p style="text-align:center;">Preços mais baratos do mercado! Promoções 24/7! Se houver ofertas mais baratas diga e fazemos promoção de 0.01€!</p>
</div>
<div class="caixa">
<img href="#" src="imagens/definicoes.png" style="margin-left:60px;">
<p style="text-align:center;">Nosso departamento de apoio ao cliente está ativo 24/7! Resolveremos todas as suas dúvidas!</p>
</div>
</div>
Otherwise, i suggest you to have a look at flexbox

Answer 4

Do it like below:
#wrap {
background: #e7e7e7;
padding: 4px;
text-align: center;
width:100%;
}
#one, #two, #three {
background: #ccc;
display: inline-block;
padding: 20px;
width:20%;
}
<div id="wrap">
<div id="one">I am div 1</div>
<div id="two">I am div 2</div>
<div id="three">I am div 2</div>
</div>

Answer 5

try changing your css like below
.produtos
{
width: 100%;
height: 252px;
background: gray;
text-align: center;
}
.caixa
{
width: 250px;
height: 250px;
background: darksalmon;
border: 1px solid #000;
display: inline-block;
}

Answer 6

The following code sets the orange boxes as display: inline-block which causes them to follow the text flow, which is set to center in the parent container. This allows the boxes to flow depending on available screen space. On wide screens they're all side by side, on smaller ones they're arranged vertically.
I have also modified the HTML in order to get rid of newlines between the boxes. These newlines would cause margins otherwise.
.produtos
{
width: 100%;
background: gray;
text-align: center;
}
.caixa
{
vertical-align: top;
width: 250px;
height: 250px;
background: darksalmon;
border: 1px solid #000;
display: inline-block;
}
<div class="produtos">
<div class="caixa">
<img src="imagens/croa.png" style="margin-left:60px;">
<p style="text-align:center;">Temos os melhores produtos do mercado! Nossos competidores ajoelham-se perante a nossa qualidade!</p>
</div
><div class="caixa">
<img src="imagens/dinheiro.png" style="margin-left:60px;">
<p style="text-align:center;">Preços mais baratos do mercado! Promoções 24/7! Se houver ofertas mais baratas diga e fazemos promoção de 0.01€!</p>
</div
><div class="caixa">
<img href="#" src="imagens/definicoes.png" style="margin-left:60px;">
<p style="text-align:center;">Nosso departamento de apoio ao cliente está ativo 24/7! Resolveremos todas as suas dúvidas!</p>
</div>
</div>

Answer 7

I hope it works for you. I added each div class row for each to so you can set the padding in classemphasized text row.
.produtos
{
width: 100%;
height: 252px;
}
.caixa
{
width: 33%;
height: 100%;
background: darksalmon;
border:1px solid red;
float: left;
}
.row{
height:100%;
padding:0 20px;
}
<div class="produtos">
<div class="caixa">
<div class="row">
<img src="imagens/croa.png">
<p style="text-align:center;">Temos os melhores produtos do mercado! Nossos competidores ajoelham-se perante a nossa qualidade!</p>
</div>
</div>
<div class="caixa">
<div class="row">
<img src="imagens/dinheiro.png">
<p style="text-align:center;">Preços mais baratos do mercado! Promoções 24/7! Se houver ofertas mais baratas diga e fazemos promoção de 0.01€!</p>
</div> </div>
<div class="caixa">
<div class="row">
<img href="#" src="imagens/definicoes.png">
<p style="text-align:center;">Nosso departamento de apoio ao cliente está ativo 24/7! Resolveremos todas as suas dúvidas!</p>
</div> </div>
</div>

Answer 8

There are different ways, but if the boxes are to contain an image or something, then you will need a fixed aspect ratio, that can be accomplished like this:
.wrapper{float:left; width:100%; background-color:deeppink;}
.lil-box{float:left; width:22%; margin:0 5.665%; background-color:bisque;}
.tight-fit{float:left; width:100%; margin-top:100%;}
<div class="wrapper">
<div class="lil-box">
<div class="tight-fit"></div>
</div>
<div class="lil-box">
<div class="tight-fit"></div>
</div>
<div class="lil-box">
<div class="tight-fit"></div>
</div>
</div>

Answer 9

you should balance the width of both divs. "caixa" and "produtos".
I think using % will be responsive for other screeen size too.
Fiddle
Hope Fiddle link help you .