居中放置div块而没有宽度

Question

当我尝试将div块“ products”居中时出现问题，因为我事先不知道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>

Answer 1

我的原始答案一直在投票，但现在我通常使用@bobince的方法来代替。.child { /* This is the item to center... */&nbsp; display: inline-block;}.parent { /* ...and this is its parent container. */&nbsp; text-align: center;}我出于历史目的的原始帖子：您可能想尝试这种方法。<div class="product_container">&nbsp; &nbsp; <div class="outer-center">&nbsp; &nbsp; &nbsp; &nbsp; <div class="product inner-center">&nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; </div>&nbsp; &nbsp; <div class="clear"/></div>匹配样式如下：.outer-center {&nbsp; &nbsp; float: right;&nbsp; &nbsp; right: 50%;&nbsp; &nbsp; position: relative;}.inner-center {&nbsp; &nbsp; float: right;&nbsp; &nbsp; right: -50%;&nbsp; &nbsp; position: relative;}.clear {&nbsp; &nbsp; clear: both;}JSFiddle这里的想法是，您要在两个div中包含要居中的内容，一个是外部的，一个是内部的。浮动两个div，以便它们的宽度自动缩小以适合您的内容。接下来，将外部div的右边缘相对放置在容器的中心。最后，您将内部div相对地相对放置，方向为其自身宽度的一半（实际上是外部div的宽度，但它们是相同的）。最终，内容将集中在其所在的任何容器中。您可能需要一个空div在年底，如果你依靠你的“产品”的内容，规格为“product_container”的高度。

Answer 2

带有“ display：block”（默认为div）的元素的宽度由其容器的宽度确定。您不能使块的宽度取决于其内容的宽度（缩小以适合）。（除了在CSS 2.1中为“浮动：左/右”的块，但这对居中没有用。）您可以将“ display”属性设置为“ inline-block”，以将一个块转换为一个缩小到适合的对象，该对象可以通过其父对象的text-align属性进行控制，但浏览器支持不佳。如果您愿意的话，通常可以通过使用hack（例如，参见-moz-inline-stack）来摆脱它。另一种方法是表格。当您的列的宽度实际上事先无法得知时，这可能是必要的。我无法从示例代码中真正看出您要执行的操作-那里没有明显的需要缩小到适合的块-但是，可以将一系列产品视为表格。[PS。切勿在网络上使用“ pt”作为字体大小。如果您确实需要固定大小的文本，则'px'更可靠，否则相对的单位（例如'％'）会更好。还有“清楚：两者都抄送” —错字了吗？].center{&nbsp; &nbsp;text-align:center;&nbsp;}.center > div{ /* N.B. child combinators don't work in IE6 or less */&nbsp; &nbsp;display:inline-block;}

Answer 3

大多数浏览器都支持display: table;CSS规则。这是一个在容器中居中放置div的好方法，而无需添加额外的HTML或对容器应用约束样式（例如text-align: center;，将容器中所有其他内联内容居中放置），同时保持所包含的div的动态宽度：HTML：<div class="container">&nbsp; <div class="centered">This content is centered</div></div>CSS：.centered { display: table; margin: 0 auto; }.container {&nbsp; background-color: green;}.centered {&nbsp; display: table;&nbsp; margin: 0 auto;&nbsp; background-color: red;}<div class="container">&nbsp; <div class="centered">This content is centered</div></div>今天执行此操作的正确方法实际上是使用flexbox规则。浏览器支持受到更多限制（CSS表支持与flexbox支持），但是此方法还允许许多其他事情，并且是这种行为的专用CSS规则：HTML：<div class="container">&nbsp; <div class="centered">This content is centered</div></div>CSS：.container {&nbsp; display: flex;&nbsp; flex-direction: column; /* put this if you want to stack elements vertically */}.centered { margin: 0 auto; }.container {&nbsp; display: flex;&nbsp; flex-direction: column; /* put this if you want to stack elements vertically */&nbsp; background-color: green;}.centered {&nbsp; margin: 0 auto;&nbsp; background-color: red;}<div class="container">&nbsp; <div class="centered">This content is centered</div></div>