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

Vous pouvez essayer cette approche de tightcss.com .

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

Voici le modèle correspondant :

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

L'idée ici est de contenir le contenu que vous souhaitez centrer dans deux divs, un externe et un interne. Vous faites flotter les deux divisions de sorte que leur largeur se réduise automatiquement pour s'adapter à votre contenu. Ensuite, vous positionnez la division extérieure de façon à ce que son bord droit soit au centre du conteneur. Enfin, vous positionnez la division intérieure dans la direction opposée, de la moitié de sa propre largeur (en fait la largeur de la division extérieure, mais elles sont identiques). Au final, cela permet de centrer le contenu dans le conteneur dans lequel il se trouve.

Regardez les photos sur le site web et ce sera clair.

Vous mai Vous avez besoin de ce div vide à la fin si vous dépendez du contenu du "produit" pour déterminer la hauteur du "conteneur_produit".

Answer 2

Un élément avec "display : block" (comme div par défaut) a une largeur déterminée par la largeur de son conteneur. Vous ne pouvez pas faire en sorte que la largeur d'un bloc dépende de la largeur de son contenu (rétrécissement pour l'adapter).

(Sauf pour les blocs qui sont "float : left/right" en CSS 2.1, mais cela ne sert à rien pour le centrage).

Vous pouvez définir la propriété "display" sur "inline-block" pour transformer un bloc en un objet rétrécissant qui peut être contrôlé par la propriété text-align de son parent, mais la prise en charge par les navigateurs est inégale. Il est possible de s'en sortir en utilisant des astuces (par exemple, voir -moz-inline-stack) si vous voulez aller dans ce sens.

L'autre solution consiste à utiliser des tableaux. Cela peut être nécessaire lorsque vous avez des colonnes dont la largeur ne peut vraiment pas être connue à l'avance. Je ne peux pas vraiment dire ce que vous essayez de faire à partir de l'exemple de code - il n'y a rien d'évident dans ce code qui pourrait être utilisé par les utilisateurs. besoin de un bloc à rétrécir pour s'adapter - mais une liste de produits pourrait éventuellement être considérée comme tabulaire.

[PS : n'utilisez jamais 'pt' pour les tailles de police sur le web. L'unité 'px' est plus fiable si vous avez vraiment besoin d'un texte de taille fixe, sinon les unités relatives comme '%' sont préférables. Et "clear : ccc both" - une faute de frappe ?].

.center{
   text-align:center; 
}

.center > div{ /* N.B. child combinators don't work in IE7 or less */
   display:inline-block;
}

Answer 3

Aujourd'hui, les navigateurs modernes prennent en charge l'option display: table; Règle CSS. Il s'agit d'une bonne astuce pour centrer un div dans un conteneur sans ajouter de HTML supplémentaire ni appliquer de styles contraignants au conteneur (comme text-align: center; qui centrerait tous les autres contenus en ligne dans le conteneur), tout en conservant une largeur dynamique pour la division contenue :

HTML :

<div class="container">
  <div class="centered">This content is centered</div>
</div>

CSS :

.container { width: 100%; } /* optional, put whatever you want or nothing */
.centered { display: table; margin: 0 auto; }

Démonstration en ligne : http://jsfiddle.net/t49ZM/

Answer 4

J'ai trouvé une solution plus élégante, en combinant "inline-block" pour éviter d'utiliser float et le hacky clear:both. Cela nécessite toujours des divs imbriqués, ce qui n'est pas très sémantique, mais ça marche...

div.outer{
    display:inline-block;
    position:relative;
    left:50%;
}

div.inner{
    position:relative;
    left:-50%;
}

J'espère que cela vous aidera !

Answer 5

Par défaut, div sont affichés en tant qu'éléments de bloc, ils ont donc une largeur de 100 %, ce qui rend leur centrage inutile. Comme suggéré par Arief, vous devez spécifier une valeur de width et vous pouvez alors utiliser auto en spécifiant margin afin de centrer un div .

Alternativement, vous pouvez aussi forcer display: inline mais vous auriez alors quelque chose qui se comporterait à peu près comme une span au lieu d'un div donc ça n'a pas beaucoup de sens.