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


当前回答

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

其他回答

将这个CSS添加到product_container类中

    margin: 0px auto;
    padding: 0px;
    border:0;
    width: 700px;
<style type="text/css">
.container_box{
    text-align:center
}
.content{
    padding:10px;
    background:#ff0000;
    color:#ffffff;

使用span代替内部div

<div class="container_box">
   <span class="content">Hello</span>
</div>

我的解决方案是:

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

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

大多数浏览器支持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 >

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。更糟糕的是,即使内容很好地符合屏幕尺寸,整个页面也会出现一个垂直滚动条。