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


当前回答

这是一种将div中任何内容居中的方法,而不知道元素的内部宽度。

#product_15{
    position: relative;
    margin: 0 auto;
    display: table;
}
.price, img{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

其他回答

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

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

或者,您也可以强制display: inline,但这样您就会有一些行为非常像span而不是div的东西,所以这没有多大意义。

这将使一个元素居中,如有序列表、无序列表或任何元素。 只需用类为outerElement的Div包装它,并给内部元素类为innerElement。

outerelement类适用于IE、旧Mozilla和大多数较新的浏览器。

 .outerElement {
        display: -moz-inline-stack;
        display: inline-block;
        vertical-align: middle;
        zoom: 1;
        position: relative;
        left: 50%;
    }

.innerElement {
    position: relative;
    left: -50%;
} 
<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)。父元素的位置可以是静态的、绝对的、相对的或固定的。

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