Dıv bloğu "ürün peşin div bilmiyorum çünkü" genişlik. merkezi çalıştığımda bir sorun var Kimse bir çözüm var mı?

Güncelleme: sorun var bilmiyorum kaç ürün alacağım ekran, ben 1, 2 veya 3 ürünleri, elimden merkezi onları eğer bir sabit sayı olarak yapardım genişliği ana div, hiç bilmem. nasıl ne zaman içeriği dinamik.

<style>
    .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;
    }
</style>

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

Güncelleme 27 Şubat 2015:Benim orijinal cevap oy Yukarı olmaya devam ediyor, ama şimdi ben normalde @bobince yaklaşımı kullanın.

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

Orijinal yazı tarihi amaçlar için:

Bu yaklaşım denemek isteyebilirsiniz.

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

İşte eşleşen tarzı:

.outer-center {
    float: right;
    right: 50%;
    position: relative;
}
.inner-center {
    float: right;
    right: -50%;
    position: relative;
}
.clear {
    clear: both;
}

JSFiddle

Buradaki fikir, iki divs, bir dış ve bir iç ortalamak istediğiniz içeriği içerir. Genişlikleri otomatik olarak içerik sığdırmak için küçült, her iki divs hissedersin. Sonra kabın ortasına sağ kenarı ile dış div göreceli konumu. Son olarak, nispeten iç div pozisyonu kendi genişliğinin yarısı ile ters yönde (aslında dış div genişliği, ama aynı onlar). Sonuçta, o her neyse içeriği merkezleri.

Sanaolabilireğer size bağlıdır, sonunda dıv boş"," içerik için yükseklik boyutu için "". product_container ürün