我有一个问题，当我试图中心的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>
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。更糟糕的是，即使内容很好地符合屏幕尺寸，整个页面也会出现一个垂直滚动条。
