Center
inside a

Question

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:

Possible duplicate of [Centering floating divs within another div](http://stackoverflow.com/questions/1269245/centering-floating-divs-within-another-div) — Jordi Nebot, Feb 07 '17 at 10:08
Possible duplicate of [Horizontally center a div in a div](http://stackoverflow.com/questions/114543/horizontally-center-a-div-in-a-div) — VMeijer, Feb 07 '17 at 10:09
Trying to center an element that is 100% wide doesn’t make much sense. Yes, via the auto margins it _is_ centered. But because there is no space left on either side, you don’t _see_ much effect of it. — CBroe, Feb 07 '17 at 10:09
@JordiNebot, doesn't seem to contain answer with equal spacing including first and last. — Qwertiy, Feb 07 '17 at 10:17

score 1 · Answer 1 · answered Feb 07 '17 at 10:12

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>

answered Feb 07 '17 at 10:12

Qwertiy

19,681
15
61
128

I didn't mean to criticize your answer. Only stating the support for others. I think a rate of 2,5% unsupported global browsers is noteworthy. – Hubert Grzeskowiak Feb 07 '17 at 10:30

score 0 · Answer 2 · answered Feb 07 '17 at 10:10

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

score 0 · Answer 3 · answered Feb 07 '17 at 10:11

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>

score 0 · Answer 4 · answered Feb 07 '17 at 10:11

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

score 0 · Accepted Answer · edited Feb 07 '17 at 10:31

0

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

edited Feb 07 '17 at 10:31

Ex-iT

1,479
2
12
20

answered Feb 07 '17 at 10:11

Navneet vaghasiya

117
1
2
7

score 0 · Answer 6 · answered Feb 07 '17 at 10:15

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>

score 0 · Answer 7 · edited Feb 07 '17 at 11:12

0

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 .

edited Feb 07 '17 at 11:12

4b0

21,981
30
95
142

answered Feb 07 '17 at 10:16

スージン

143
8

user2912840 · Answer 8 · 2017-02-07T11:11:37.200

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>

Mark Valenzuela · Answer 9 · 2017-02-07T10:42:32.243

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>

Center inside a

9 Answers9

Center
inside a