Mise à jour 27 février 2015: Ma réponse initiale continue à être votée, mais maintenant j’utilise plutôt l’approche de @ bobince.

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

Mon post original à des fins historiques:

Vous voudrez peut-être essayer cette approche.

Voici le style correspondant:

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

JSFiddle

L’idée ici est que vous contenez le contenu que vous souhaitez centrer dans deux div, un externe et un interne. Vous flottez les deux divs pour que leurs largeurs se réduisent automatiquement à votre contenu. Ensuite, vous positionnez relativement le div externe avec son bord droit au centre du conteneur. Enfin, vous positionnez relativement la division interne dans la direction opposée par la moitié de sa propre largeur (en fait, la largeur de la div externe, mais elles sont identiques). En fin de compte, cela centre le contenu dans n’importe quel conteneur dans lequel il se trouve.

Vous pouvez avoir besoin de ce div vide à la fin si vous dépendez du contenu de votre “produit” pour dimensionner la hauteur du “product_container”.

Un élément avec ‘display: block’ (comme div est par défaut) a une largeur déterminée par la largeur de son conteneur. Vous ne pouvez pas définir la largeur d’un bloc en fonction de la largeur de son contenu (rétrécissement à l’ajustement).

(Sauf pour les blocs qui sont ‘float: left / right’ dans CSS 2.1, mais cela ne sert à rien de les centrer.)

Vous pouvez définir la propriété ‘display’ sur ‘inline-block’ pour transformer un bloc en object à rétrécir pouvant être contrôlé par la propriété text-align de son parent, mais la prise en charge du navigateur est inégale. Vous pouvez généralement vous en sortir en utilisant des hacks (par exemple, voir -moz-inline-stack) si vous voulez aller dans cette direction.

L’autre façon de faire est les tables. Cela peut être nécessaire lorsque vous avez des colonnes dont la largeur ne peut 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 cas qui nécessiterait un blocage par rétrécissement – 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. “px” est plus fiable si vous avez vraiment besoin de texte de taille fixe, sinon les unités relatives comme “%” sont meilleures. Et «clair: ccc les deux» – une faute de frappe?]

 .center{ text-align:center; } .center > div{ /* NB child combinators don't work in IE6 or less */ display:inline-block; } 

JSFiddle

La plupart des navigateurs prennent en charge l’ display: table; Règle CSS. Ceci est une bonne astuce pour centrer un div dans un conteneur sans append de code HTML supplémentaire ni appliquer de styles contraignants au conteneur (comme text-align: center; qui centrerait tout le contenu en ligne du conteneur), tout en conservant la largeur dynamic div:

HTML:

 
 
This content is centered
  

CSS:

 .centered { display: table; margin: 0 auto; } 

 .container { background-color: green; } .centered { display: table; margin: 0 auto; background-color: red; } 

 
 
This content is centered
  

J’ai trouvé une solution plus élégante, combinant “inline-block” pour éviter d’utiliser float et le hack clair: les deux. Il nécessite toujours des div nesteds, 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 aide!

quatre façons de peler ce chat:

Bouton un: n’importe quoi de type display: block prendra la largeur complète des parents. (sauf si combiné avec float ). Vrai. Mauvais exemple.

Bouton 2: aller à l’ display: inline-block conduira à une largeur automatique (plutôt que complète). Vous pouvez ensuite centrer en utilisant text-align: center sur le bloc d’emballage . Probablement le plus simple et le plus compatible, même avec les navigateurs «vintage» …

 .wrapTwo text-align: center; .two display: inline-block; // instantly shrinks width 

Bouton 3: Pas besoin de mettre quoi que ce soit sur la pellicule. C’est peut-être la solution la plus élégante. Fonctionne également verticalement. (Le support du navigateur pour transtlate est assez bon (≥IE9) de nos jours …).

 position: relative; display: inline-block; // instantly shrinks width left: 50%; transform: translateX(-50%); 

Btw: C’est aussi un excellent moyen de centrer verticalement des blocs de hauteur inconnue (en relation avec un positionnement absolu).

Bouton 4: Positionnement absolu. Assurez-vous de réserver suffisamment de hauteur dans le wrapper, car personne d’autre ne le fera (ni clearfix ni implicite …)

 .four position absolute top 0 left 50% transform translateX(-50%) .wrapFour position relative // otherwise, absolute positioning will be relative to page! height 50px // ensure height background lightgreen // just a marker 

Bouton 5: Enfin: float (qui apporte également des éléments de niveau bloc à la largeur dynamic) et un décalage relatif. Bien que je n’ai jamais vu cela dans la nature. Peut-être y a-t-il des inconvénients …

 .wrapFive &:after // aka 'clearfix' content '' display table clear both .five float left position relative left 50% transform translateX(-50%) 

→ code source complet (syntaxe du stylet)

 
 
 
 
 
 
 .outer{ width:100%; height: 100px; } .target{ position: absolute; width: auto; height: 100px; left: 50%; transform: translateX(-50%); } .filler{ position:relative; width:150px; height:20px; } 

Si l’élément cible est positionné de manière absolue, vous pouvez le centrer en le déplaçant de 50% dans une direction (à left: 50% ) puis en le transformant à 50% dans la direction opposée ( transform:translateX(-50%) ). Cela fonctionne sans définir la largeur de l’élément cible (ou avec la width:auto ). La position de l’élément parent peut être statique, absolue, relative ou fixe.

Par défaut, les éléments div sont affichés en tant qu’éléments de bloc, ils ont donc une largeur de 100%, ce qui les rend inutiles. Comme suggéré par Arief, vous devez spécifier une width et vous pouvez utiliser auto lorsque vous spécifiez une margin pour centrer un div .

Alternativement, vous pouvez également forcer l’ display: inline , mais alors vous auriez quelque chose qui se comporte à peu près comme un span au lieu d’un div , donc cela n’a pas beaucoup de sens.

Cela centrera un élément tel qu’une liste ordonnée, une liste non ordonnée ou un élément quelconque. Il suffit de l’envelopper avec une div avec la classe d’ElementElement et de donner à l’élément interne la classe de la propriété innerElement.

La classe ment externe prend en compte IE, l’ancien Mozilla et la plupart des navigateurs récents.

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

utiliser css3 flexbox avec Content-content: center;

  
 
content1
 
content2
 
 .row { display: flex; /* equal height of the children */ height:100px; border:1px solid red; width: 400px; justify-content:center; } 

Je crains que la seule façon de le faire sans spécifier explicitement la largeur est d’utiliser des tables (gasp).

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

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

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

Voici HTML modifié:

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 pour laquelle il est préférable de ne pas div.clear (à part le fait qu’il ne soit pas div.clear d’avoir un élément vide) est l’affectation de marge trop zélée de Firefox.

Si, par exemple, vous avez ce code HTML:

 
 
 
 
 
 
 
 
Some text 

ensuite, dans Firefox (8.0 au moment de l’écriture), vous verrez 11px marge de 11px avant product_container . Pire encore, vous obtiendrez une barre de défilement verticale pour toute la page, même si le contenu correspond parfaitement aux dimensions de l’écran.

Essayez ce nouveau css et balisage

Voici HTML modifié:

 
 
 
  
R$ 0,01
 
 
  
R$ 0,01
 
 
  
R$ 0,01
 
  

Et voici le CSS modifié:

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

 
 
 
 
 
 
 
 .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 “Centre externe” chevauchera les autres contenus proches à sa droite. Tout lien ou bouton à droite du “centre extérieur” ne fonctionnera pas. Essayez la couleur de fond pour “Centre externe” pour comprendre le besoin de “débordement: caché”

J’ai trouvé une solution intéressante, je faisais du slider et je devais centrer les contrôles de diapositives et je l’ai fait et ça marche bien. Vous pouvez également append une position relative au parent et déplacer la position de l’enfant verticalement. Jetez un coup d’oeil 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:

 
 
voila
  

Ne pas display:table; et définir la margin pour auto

Bit de code important:

 .relatedProducts { display: table; margin-left: auto; margin-right: auto; } 

Peu importe le nombre d’éléments que vous avez maintenant, il s’alignera automatiquement au centre

Exemple dans l’extrait de code:

 .relatedProducts { display: table; margin-left: auto; margin-right: auto; } a { text-decoration:none; } 

 
 
Similar Products
 test1  test2  test3   

Correctif, mais ça marche …

CSS:

 #mainContent { position:absolute; width:600px; background:#FFFF99; } #sidebar { float:left; margin-left:610px; max-width:300; background:#FFCCCC; } #sidebar{ text-align:center; } 

HTML:

  
 
 
 
 1
 
 123
 123
 123
 

 
 
 
  

Correctif simple qui fonctionne dans les anciens navigateurs (mais utilise des tables et nécessite une hauteur à définir):

 
 
 In the middle 
  

}

utiliser span istead des divs internes

 
 Hello  

Je sais que cette question est ancienne, mais je m’y attarde. Très similaire à la réponse de bobince mais avec un exemple de code de travail.

Faites de chaque produit un bloc en ligne. Centrez le contenu du conteneur. Terminé.

http://jsfiddle.net/rgbk/6Z2Re/

  
 
 
R$ 0,01
 
 
 
R$ 0,01
 
 
 
R$ 0,01
 
 
 
R$ 0,01
 
 
 
R$ 0,01
 
 
 
R$ 0,01
 
  

Voir aussi: Centrer les blocs en ligne avec largeur dynamic en CSS

ma solution était:

 .parent { display: flex; flex-wrap: wrap; } .product { width: 240px; margin-left: auto; height: 127px; margin-right: auto; } 

ajoutez ce css à votre classe product_container

  margin: 0px auto; padding: 0px; border:0; width: 700px;