我有一个问题，当我试图中心的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>
大多数浏览器支持display: table;CSS规则。这是一个在容器中居中div的好技巧，无需添加额外的HTML，也无需对容器应用约束样式(如text-align: center;这将在容器中居中所有其他内联内容)，同时保持包含div的动态宽度:
HTML:
<div class="container">
<div class="centered">This content is centered</div>
</div>
CSS:
.centered { display: table; margin: 0 auto; }
.container {
背景颜色:绿色;
｝
.centered {
显示:表;
保证金:0自动;
背景颜色:红色;
｝
< div class = "容器" >
<div class="居中">内容居中</div>
< / div >
更新(2015-03-09):
现在正确的方法实际上是使用flexbox规则。浏览器支持有点受限(CSS表支持vs . flexbox支持)，但这种方法也允许许多其他事情，并且是针对这种类型行为的专用CSS规则:
HTML:
<div class="container">
<div class="centered">This content is centered</div>
</div>
CSS:
.container {
display: flex;
flex-direction: column; /* put this if you want to stack elements vertically */
}
.centered { margin: 0 auto; }
.container {
显示:flex;
flex-direction:列;/*如果你想垂直堆叠元素*/
背景颜色:绿色;
｝
.centered {
保证金:0自动;
背景颜色:红色;
｝
< div class = "容器" >
<div class="居中">内容居中</div>
< / div >
2015年2月27日更新:我最初的答案不断被投票，但现在我通常使用@bobince的方法。
.child { /* This is the item to center... */
display: inline-block;
}
.parent { /* ...and this is its parent container. */
text-align: center;
}
出于历史目的，我原来的帖子是:
您可能想尝试这种方法。
<div class="product_container">
<div class="outer-center">
<div class="product inner-center">
</div>
</div>
<div class="clear"/>
</div>
下面是匹配的样式:
.outer-center {
float: right;
right: 50%;
position: relative;
}
.inner-center {
float: right;
right: -50%;
position: relative;
}
.clear {
clear: both;
}
JSFiddle
The idea here is that you contain the content you want to center in two divs, an outer one and an inner one. You float both divs so that their widths automatically shrink to fit your content. Next, you relatively position the outer div with it's right edge in the center of the container. Lastly, you relatively position the inner div the opposite direction by half of its own width (actually the outer div's width, but they are the same). Ultimately that centers the content in whatever container it's in.
如果你依赖于你的“product”内容来调整“product_container”的高度，你可能需要在结尾使用空的div。
试试这个新的css和标记
下面是修改后的HTML:
<div class="product_container">
<div class="products" id="products">
<div id="product_15" class="products_box">
<img src="/images/ecommerce/card_default.png">
<div class="price">R$ 0,01</div>
</div>
<div id="product_15" class="products_box">
<img src="/images/ecommerce/card_default.png">
<div class="price">R$ 0,01</div>
</div>
<div id="product_15" class="products_box">
<img src="/images/ecommerce/card_default.png">
<div class="price">R$ 0,01</div>
</div>
</div>
这里是修改后的CSS:
<pre>
.product_container
{
text-align: center;
height: 150px;
}
.products {
left: 50%;
height:35px;
float:left;
position: relative;
margin: 0 auto;
width:auto;
}
.products .products_box
{
width:auto;
height:auto;
float:left;
right: 50%;
position: relative;
}
.price {
margin: 6px 2px;
width: 137px;
color: #666;
font-size: 14pt;
font-style: normal;
border: 1px solid #CCC;
background-color: #EFEFEF;
}
