居中一个没有宽度的div块 [英] Centering a div block without the width

问题描述

我有一个问题，当我尝试中心的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;颜色：＃666; font-size：14pt; font-style：normal; border：1px solid #CCC; background-color：#EFEFEF;}

 < div class =product_container> < div class =productsid =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>  

解决方案

2015年2月27日更新：我的原始答案不断投票，但现在我通常使用@ bobince的方法。

  .child {/ *这是项目到中心... * / 
 display：inline-block; 
} 
 .parent {/ * ...，这是它的父容器。 * / 
 text-align：center; 
} 
  

我的原始信息用于历史目的： p>

您可能想尝试此方法。

 < 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

这里的想法是你包含你想要集中在两个div中的内容，外部和内部。您浮动两个div，使其宽度自动缩小以适合您的内容。接下来，你相对地定位外部div，它的右边缘在容器的中心。最后，你将内部div的相对方向相对于自己的宽度的一半（实际上是外部div的宽度，但它们是相同的）。最终将内容置于其所在的任何容器中。

如果您依赖于产品，您可以内容来调整product_container的高度。

I have a problem when I try to center the div block "products" because I don't know in advance the div width. Anybody have a solution?

Update: The problem I have is I don't know how many products I'll display, I can have 1, 2 or 3 products, I can center them if it was a fixed number as I'd know the width of the parent div, I just don't know how to do it when the content is dynamic.

.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>

解决方案

Update 27 Feb 2015: My original answer keeps getting voted up, but now I normally use @bobince's approach instead.

.child { /* This is the item to center... */
  display: inline-block;
}
.parent { /* ...and this is its parent container. */
  text-align: center;
}

My original post for historical purposes:

You might want to try this approach.

<div class="product_container">
    <div class="outer-center">
        <div class="product inner-center">
        </div>
    </div>
    <div class="clear"/>
</div>

Here's the matching style:

.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.

You may need that empty div at the end if you depend on your "product" content to size the height for the "product_container".

这篇关于居中一个没有宽度的div块的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！