Question

我希望div“caixa”在div“produtos”中居中。我可以使用margin-left使用精确值来完成它。但是我希望它能够响应其他屏幕尺寸，因此我将margin-left和margin-right作为auto推出。

所需格式的图片：

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

喜欢这个？

＆＃13;

.produtos {
  width: 100%;
  height: 252px;
  background: gray;
  text-align: center;
}
.caixa {
  width: 250px;
  height: 250px;
  background: darksalmon;
  border: 1px solid #000;
  margin: 0 auto;
}

＆＃13;

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

＆＃13;

否则，我建议您查看flexbox

Answer 3

如下所示：

＆＃13;

#wrap {
    background: #e7e7e7;
    padding: 4px; 
    text-align: center;
    width:100%;  
}

#one, #two, #three {
     background: #ccc;
     display: inline-block;    
     padding: 20px;
     width:20%;
}

＆＃13;

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

＆＃13;

Answer 4

尝试更改下面的CSS

.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 5

使用此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 6

以下代码将橙色框设置为display: inline-block，这使它们跟随文本流，该文本流在父容器中设置为center。这允许盒子根据可用的屏幕空间流动。在宽屏幕上，它们并排在一起，在较小的屏幕上，它们是垂直排列的。

我还修改了HTML，以便摆脱框之间的换行符。否则这些新行会产生利润。

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 7

你应该平衡两个div的宽度。 “caixa”和“produtos”。我认为使用%也会对其他筛选大小做出响应。

Fiddle

希望小提琴链接可以帮助你。

Answer 8

有不同的方法，但如果框中包含图像或其他内容，则需要固定的宽高比，可以这样完成：

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 9

我希望它适合你。我为每个添加了每个div类row，因此您可以在类强调文本 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 10

这是一个快速提示：将外部div属性设置为：

position: relative;

将内部div属性设置为：

position: absolute;
left: 50%;
top: 50%
transform: translate(-50%, -50%);

在<div>中居中<div>

10 个答案: