Centrer un bloc div sans la largeur

Question

J'ai un problème lorsque j'essaie de centrer le bloc div "produits" car je ne connais pas à l'avance la largeur du div. Quelqu'un a-t-il une solution ?

Mise à jour : Le problème que j'ai est que je ne sais pas combien de produits je vais afficher, je peux avoir 1, 2 ou 3 produits, je peux les centrer s'il s'agit d'un nombre fixe car je connais la largeur de la div parente, mais je ne sais pas comment le faire lorsque le contenu est dynamique.

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

Answer 1

Cela permet de centrer un élément tel qu'une liste ordonnée, une liste non ordonnée ou tout autre élément. Il suffit de l'entourer d'un Div de la classe outerElement et de donner à l'élément interne la classe innerElement.

La classe outerelement tient compte de IE, de l'ancien Mozilla et de la plupart des navigateurs plus récents.

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

.innerElement {
    position: relative;
    left: -50%;
}

Answer 2

Légère variation sur La réponse de Mike M. Lin

Si vous ajoutez overflow: auto; ( ou hidden ) à div.product_container alors vous n'avez pas besoin div.clear .

Ceci est tiré de cet article -> http://www.quirksmode.org/css/clearing.html

Voici le HTML modifié :

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

Et voici le CSS modifié :

.product_container {
  overflow: auto;
  /* width property only required if you want to support IE6 */
  width: 100%;
}

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

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

La raison, pourquoi c'est mieux sans div.clear (en dehors du fait qu'il n'est pas normal d'avoir un élément vide) est l'affectation trop zélée des marges par Firefox.

Si, par exemple, vous avez ce html :

<div class="product_container">
    <div class="outer-center">
        <div class="product inner-center">
        </div>
    </div>
    <div style="clear: both;"></div>
</div>
<p style="margin-top: 11px;">Some text</p>

ensuite, dans Firefox (8.0 au moment de la rédaction), vous verrez 11px marge avant product_container . Le pire, c'est que vous obtiendrez une barre de défilement verticale pour toute la page, même si le contenu s'adapte parfaitement aux dimensions de l'écran.

Answer 3

Essayez ce nouveau css et ce nouveau balisage

Voici le HTML modifié :

<div class="product_container">
<div class="products" id="products">
   <div id="product_15" class="products_box">
       <img src="/images/ecommerce/card_default.png">
       <div class="price">R$ 0,01</div>
   </div>
   <div id="product_15" class="products_box">
       <img src="/images/ecommerce/card_default.png">
       <div class="price">R$ 0,01</div>
   </div>   
   <div id="product_15" class="products_box">
       <img src="/images/ecommerce/card_default.png">
       <div class="price">R$ 0,01</div>
   </div>
</div>

Et voici le CSS modifié :

<pre>
.product_container 
 {
 text-align:    center;
 height:        150px;
 }

.products {
    left: 50%;
height:35px;
float:left;
position: relative;
margin: 0 auto;
width:auto;
}
.products .products_box
{
width:auto;
height:auto;
float:left;
  right: 50%;
  position: relative;
}
.price {
    margin:        6px 2px;
    width:         137px;
    color:         #666;
    font-size:     14pt;
    font-style:    normal;
    border:        1px solid #CCC;
    background-color:   #EFEFEF;
}

Answer 4

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

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

.product_container
{
overflow:hidden;
}

Si vous ne fournissez pas "overflow:hidden" pour ".product_container", le div "outer-center" chevauchera les autres contenus situés à sa droite. Tous les liens ou boutons situés à droite de "outer-center" ne fonctionneront pas. Essayez la couleur de fond de "outer-center" pour comprendre la nécessité de "overflow :hidden".

Answer 5

J'ai trouvé une solution intéressante, j'étais en train de créer un curseur et je devais centrer les commandes du curseur. J'ai fait cela et cela fonctionne bien. Vous pouvez également ajouter une position relative au parent et déplacer la position de l'enfant verticalement. Jetez un coup d'œil http://jsfiddle.net/bergb/6DvJz/

CSS :

#parent{
        width:600px;
        height:400px;
        background:#ffcc00;
        text-align:center;
    }

#child{
        display:inline-block;
        margin:0 auto;
        background:#fff;
    }  

HTML :

<div id="parent">
    <div id="child">voila</div>
</div>