没有宽度的div块居中

我有一个问题，当我试图中心的div块“产品”，因为我不知道提前div宽度。有人有办法吗?

更新:我有问题是我不知道有多少产品我将显示，我可以有1、2或3个产品，我可以中心他们，如果这是一个固定的数字，因为我知道父div的宽度，我只是不知道如何做的时候，内容是动态的。

.product_container { text-align: center; height: 150px; } .products { height: 140px; text-align: center; margin: 0 auto; clear: ccc both; } .price { margin: 6px 2px; width: 137px; color: #666; font-size: 14pt; font-style: normal; border: 1px solid #CCC; background-color: #EFEFEF; } <div class="product_container"> <div class="products" id="products"> <div id="product_15"> <img src="/images/ecommerce/card_default.png"> <div class="price">R$ 0,01</div> </div> <div id="product_15"> <img src="/images/ecommerce/card_default.png"> <div class="price">R$ 0,01</div> </div> <div id="product_15"> <img src="/images/ecommerce/card_default.png"> <div class="price">R$ 0,01</div> </div> </div> </div>

当前回答

<div class="outer">
   <div class="target">
      <div class="filler">
      </div>
   </div>
</div>

.outer{
   width:100%;
   height: 100px;
}

.target{
   position: absolute;
   width: auto;
   height: 100px;
   left: 50%;
   transform: translateX(-50%);
}

.filler{
   position:relative;
   width:150px;
   height:20px;
}

如果目标元素是绝对定位的，您可以通过将其在一个方向上移动50%(左:50%)，然后将其在相反的方向上转换50% (transform:translateX(-50%))来居中。这无需定义目标元素的宽度(或使用width:auto)。父元素的位置可以是静态的、绝对的、相对的或固定的。

2015-08-19 01:57:45

其他回答

<div class="outer">
   <div class="target">
      <div class="filler">
      </div>
   </div>
</div>

.outer{
   width:100%;
   height: 100px;
}

.target{
   position: absolute;
   width: auto;
   height: 100px;
   left: 50%;
   transform: translateX(-50%);
}

.filler{
   position:relative;
   width:150px;
   height:20px;
}

2015-08-19 01:57:45

在旧浏览器中工作的简单修复(但使用表格，并需要设置高度):

<div style="width:100%;height:40px;position:absolute;top:50%;margin-top:-20px;">
  <table style="width:100%"><tr><td align="center">
    In the middle
  </td></tr></table>
</div>

2012-08-03 07:35:21

我找到了一个更优雅的解决方案，结合“内联块”来避免使用float和俗气的clear:两者。它仍然需要嵌套的divs，这不是很语义，但它只是工作…

div.outer{
    display:inline-block;
    position:relative;
    left:50%;
}

div.inner{
    position:relative;
    left:-50%;
}

希望能有所帮助!

2011-07-01 06:59:13

使用css3 flexbox与justify-content:center;

    <div class="row">
         <div class="col" style="background:red;">content1</div>
          <div class="col" style="">content2</div>
    </div>


.row {
    display: flex; /* equal height of the children */
    height:100px;
    border:1px solid red;
    width: 400px;
    justify-content:center;
}

2015-11-21 11:57:53

将这个CSS添加到product_container类中

    margin: 0px auto;
    padding: 0px;
    border:0;
    width: 700px;

2008-11-12 13:49:49

没有宽度的div块居中

推荐文章

最新文章

标签