我有一个问题,当我试图中心的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>


当前回答

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

其他回答

Mike M. Lin的回答略有不同

如果添加overflow: auto;(或隐藏)到div.product_container,那么你不需要div.clear。

这是来自这篇文章-> http://www.quirksmode.org/css/clearing.html

下面是修改后的HTML:

<div class="product_container">
    <div class="outer-center">
        <div class="product inner-center">
        </div>
    </div>
</div>

这里是修改后的CSS:

.product_container {
  overflow: auto;
  /* width property only required if you want to support IE6 */
  width: 100%;
}

.outer-center {
  float: right;
  right: 50%;
  position: relative;
}

.inner-center {
  float: right;
  right: -50%;
  position: relative;
}

为什么没有div.clear会更好(除了空元素感觉不对之外),原因是Firefox过于热心的边距赋值。

例如,如果你有这样的html:

<div class="product_container">
    <div class="outer-center">
        <div class="product inner-center">
        </div>
    </div>
    <div style="clear: both;"></div>
</div>
<p style="margin-top: 11px;">Some text</p>

然后,在Firefox(在编写时为8.0)中,您将看到product_container前面的边距为11px。更糟糕的是,即使内容很好地符合屏幕尺寸,整个页面也会出现一个垂直滚动条。

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

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

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

希望能有所帮助!

恐怕唯一不显式指定宽度的方法是使用(gasp)表。

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

我的解决方案是:

.parent {
    display: flex;
    flex-wrap: wrap;
}

.product {
    width: 240px;
    margin-left: auto;
    height: 127px;
    margin-right: auto;
}