我有一个问题，当我试图中心的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: block '(默认为div)的元素的宽度由其容器的宽度决定。你不能让一个块的宽度依赖于它的内容的宽度(缩小到适合)。
(除了CSS 2.1中' float: left/right '的块，但这对居中没有用处。)
你可以将“display”属性设置为“inline-block”，将一个块转换为一个可以由其父元素的text-align属性控制的收缩对象，但浏览器的支持参差不齐。你可以通过使用黑客(例如。如果你想这样做，请参阅-moz-inline-stack)。
另一种方法是桌子。当您的列的宽度确实无法提前知道时，这可能是必要的。我无法从示例代码中真正看出您想要做什么-其中没有任何明显的需要缩小以适应的块-但是可以将产品列表视为列表。
[附注:永远不要在网络上使用' pt '来表示字体大小。如果确实需要固定大小的文本，' px '更可靠，否则像' % '这样的相对单位更好。还有“clear: ccc both”——拼写错误?］
.center{
text-align:center;
}
.center > div{ /* N.B. child combinators don't work in IE6 or less */
display:inline-block;
}
JSFiddle
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。
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。更糟糕的是，即使内容很好地符合屏幕尺寸，整个页面也会出现一个垂直滚动条。
试试这个新的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;
}
大多数浏览器支持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 >
我知道这个问题很老了，但我正在尝试。非常类似于bobince的答案，但有工作代码示例。
使每个产品都成为一个内联块。将容器的内容居中。完成了。
http://jsfiddle.net/rgbk/6Z2Re/
<style>
.products{
text-align:center;
}
.product{
display:inline-block;
text-align:left;
background-image: url('http://www.color.co.uk/wp-content/uploads/2013/11/New_Product.jpg');
background-size:25px;
padding-left:25px;
background-position:0 50%;
background-repeat:no-repeat;
}
.price {
margin: 6px 2px;
width: 137px;
color: #666;
font-size: 14pt;
font-style: normal;
border: 1px solid #CCC;
background-color: #EFEFEF;
}
</style>
<div class="products">
<div class="product">
<div class="price">R$ 0,01</div>
</div>
<div class="product">
<div class="price">R$ 0,01</div>
</div>
<div class="product">
<div class="price">R$ 0,01</div>
</div>
<div class="product">
<div class="price">R$ 0,01</div>
</div>
<div class="product">
<div class="price">R$ 0,01</div>
</div>
<div class="product">
<div class="price">R$ 0,01</div>
</div>
</div>
请参见:CSS中具有动态宽度的内联块居中
剥猫皮的六种方法:
按钮一:任何display: block类型的东西都将采用完整的父宽度。(除非与float或display结合使用:flex parent)。真实的。不好的例子。
按钮2:用于显示:内联块将导致自动(而不是全部)宽度。然后可以在换行块上使用text-align: center居中。可能是最简单，最广泛兼容的浏览器，即使是“老式”浏览器…
.wrapTwo
text-align: center;
.two
display: inline-block; // instantly shrinks width
按钮3:
不需要在包装上放任何东西。也许这是最优雅的解决方案。也适用于垂直方向。(浏览器对翻译的支持已经足够好了(≥IE9)…)
position: relative;
display: inline-block; // instantly shrinks width
left: 50%;
transform: translateX(-50%);
顺便说一句:这也是垂直定心未知高度的块的好方法(与绝对定位有关)。
按钮4:
绝对定位。只要确保在包装器中保留足够的高度，因为没有人会这样做(既不是clearfix也不是implicit…)
.four
position absolute
top 0
left 50%
transform translateX(-50%)
.wrapFour
position relative // otherwise, absolute positioning will be relative to page!
height 50px // ensure height
background lightgreen // just a marker
按钮5:
浮动(它也为块级元素带来动态宽度)和相对移位。虽然我从没在野外见过。也许有缺点……
.wrapFive
&:after // aka 'clearfix'
content ''
display table
clear both
.five
float left
position relative
left 50%
transform translateX(-50%)
更新:按钮6:
现在，你也可以使用flex-box。注意，样式应用于居中对象的包装器。
.wrapSix
display: flex
justify-content: center
→完整源代码(触控笔语法)
