Centering a div block without the width

Posted by Vinicius on Stack Overflow See other posts from Stack Overflow or by Vinicius
Published on 2008-11-12T13:43:57Z Indexed on 2010/05/14 1:54 UTC
Read the original article Hit count: 374

Filed under:
|

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

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

© Stack Overflow or respective owner

Related posts about css

Related posts about html