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

其他回答

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

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

默认情况下,div元素显示为块元素,因此它们有100%的宽度,使得居中没有意义。正如Arief所建议的,你必须指定宽度,然后你可以在指定边距时使用auto,以便将div居中。

或者,您也可以强制display: inline,但这样您就会有一些行为非常像span而不是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)。父元素的位置可以是静态的、绝对的、相对的或固定的。

我找到了一个更优雅的解决方案,结合“内联块”来避免使用float和俗气的clear:两者。它仍然需要嵌套的divs,这不是很语义,但它只是工作…

div.outer{
    display:inline-block;
    position:relative;
    left:50%;
}

div.inner{
    position:relative;
    left:-50%;
}

希望能有所帮助!