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

其他回答

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

带有' 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

我发现了一个有趣的解决方案,我正在制作滑块,必须将滑块控制居中,我这样做,工作很好。您也可以添加相对位置到父和移动子位置垂直。看看http://jsfiddle.net/bergb/6DvJz/

CSS:

#parent{
        width:600px;
        height:400px;
        background:#ffcc00;
        text-align:center;
    }

#child{
        display:inline-block;
        margin:0 auto;
        background:#fff;
    }  

HTML:

<div id="parent">
    <div id="child">voila</div>
</div>
<div class="outer">
   <div class="target">
      <div class="filler">
      </div>
   </div>
</div>

.outer{
   width:100%;
   height: 100px;
}

.target{
   position: absolute;
   width: auto;
   height: 100px;
   left: 50%;
   transform: translateX(-50%);
}

.filler{
   position:relative;
   width:150px;
   height:20px;
}

如果目标元素是绝对定位的,您可以通过将其在一个方向上移动50%(左:50%),然后将其在相反的方向上转换50% (transform:translateX(-50%))来居中。这无需定义目标元素的宽度(或使用width:auto)。父元素的位置可以是静态的、绝对的、相对的或固定的。

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