Centrage d'un bloc div sans la largeur

j'ai un problème quand j'essaie de centrer le bloc div" produits " parce que je ne sais pas à l'avance la largeur div. Quelqu'un a une solution?

mise à jour: le problème que j'ai Est Je ne sais pas combien de produits je vais afficher, je peux avoir 1, 2 ou 3 Produits, je peux les centrer si c'était un nombre fixe que je connais la largeur de la div mère, Je ne sais pas comment le faire quand le contenu est dynamique.

.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;
}
<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>
224
demandé sur Nhan 2008-11-12 16:43:57

21 réponses

mise à jour du 27 février 2015: ma réponse originale continue à être votée, mais maintenant j'utilise normalement l'approche de @bobince à la place.

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

Mon post original pour des raisons historiques:

, Vous pourriez vouloir essayer cette approche.

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

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 voulez centrer en deux divs, une externe et une interne. Vous flotter les deux divs, de sorte que leurs largeurs automatiquement ajuster votre contenu. Ensuite, vous positionnez relativement la div externe avec son bord droit au centre du conteneur. Enfin, vous positionnez relativement la div interne dans la direction opposée par la moitié de sa propre largeur (en fait la largeur de la div externe, mais ils sont les mêmes). En fin de compte qui Centre le contenu dans quel que soit le conteneur.

vous may besoin que div vide à la fin si vous dépendez de votre" produit "contenu pour la taille de la hauteur pour le"product_container".

236
répondu Mike M. Lin 2015-02-27 18:16:26

Un élément avec ‘display: block " (div par défaut) a une largeur déterminée par la largeur de son conteneur. On ne peut pas faire dépendre la largeur d'un bloc de la largeur de son contenu (rétrécissement-ajustement).

(excepté pour les blocs qui sont ‘flottant: gauche/droite’ dans CSS 2.1, mais ce n'est pas utile pour le centrage.)

vous pouvez définir la propriété’ display ' à 'inline-block' pour transformer un bloc en un objet rétrécissable qui peut être contrôlé par les propriété text-align, mais le support du navigateur est irrégulier. Vous pouvez généralement vous en tirer avec en utilisant des hacks (par ex. voir -moz-inline-pile) si vous voulez aller de cette façon.

l'autre voie à suivre est les tables. Cela peut être nécessaire lorsque vous avez des colonnes dont la largeur ne peut vraiment pas être connu à l'avance. Je ne peux pas vraiment dire ce que vous essayez de faire à partir du code de l'exemple - il n'y a rien d'évident là-dedans qui besoin un bloc de rétrécissement-ajustement - mais une liste de produits pourrait éventuellement être considéré 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 à la fois" - une faute de frappe?]

.center{
   text-align:center; 
}

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

JSFiddle

136
répondu bobince 2015-01-21 20:11:45

la plupart des navigateurs supportent la règle display: table; CSS. C'est un bon truc pour centrer un div dans un conteneur sans ajouter de HTML supplémentaire ni appliquer des styles contraignants au conteneur (comme text-align: center; qui centrerait tous les autres contenus en ligne dans le conteneur), tout en gardant la largeur dynamique pour le div contenu:

HTML:

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

CSS:

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

.container {
  background-color: green;
}
.centered {
  display: table;
  margin: 0 auto;
  background-color: red;
}
<div class="container">
  <div class="centered">This content is centered</div>
</div>

mise à jour (2015-03-09):

la bonne façon de faire cela aujourd'hui est en fait d'utiliser les règles flexbox. Le soutien de navigateur est un peu plus restreint ( CSS table support vs flexbox support ) mais cette méthode permet aussi beaucoup d'autres choses, et est une règle CSS dédiée pour ce type de comportement:

HTML:

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

CSS:

.container {
  display: flex;
  flex-direction: column; /* put this if you want to stack elements vertically */
}
.centered { margin: 0 auto; }

.container {
  display: flex;
  flex-direction: column; /* put this if you want to stack elements vertically */
  background-color: green;
}
.centered {
  margin: 0 auto;
  background-color: red;
}
<div class="container">
  <div class="centered">This content is centered</div>
</div>
91
répondu Maxime Rossini 2015-03-09 18:28:21

j'ai trouvé une solution plus élégante, combinant" inline-block " pour éviter d'utiliser float et le hacky clear:les deux. Il nécessite encore des divs Tho imbriqués, ce qui n'est pas très sémantique, mais il fonctionne tout simplement...

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

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

Espère que cela aide!

16
répondu JavierIEH 2011-07-01 06:59:13
"151980920 la" quatre voies à une peau de chat:

Bouton un: tout ce qui est de type display: block supposera la pleine largeur des parents. (sauf si combiné avec float ). Vrai. Mauvais exemple.

Bouton 2: aller pour display: inline-block conduira à automatique (plutôt que pleine) largeur. Vous pouvez ensuite centrer en utilisant text-align: center sur le bloc d'emballage . probablement le plus facile, et le plus largement 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 l'enveloppe. Donc, c'est peut-être la solution la plus élégante. Fonctionne aussi verticalement. (La prise en charge par le navigateur pour transtlate est assez bon (≥IE9) ces jours...).

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

Btw: Aussi un excellent moyen pour centrer verticalement des blocs de hauteur inconnue (en relation avec le positionnement absolu).

bouton 4: Positionnement absolu. Assurez-vous juste de réserver assez de hauteur dans l'emballage, puisque 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 aussi des éléments de niveau bloc à la largeur dynamique) et un déplacement relatif. Bien J'ai jamais vu ça dans la nature. Peut-être il ya 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 stylus)

14
répondu Frank Nocke 2017-12-05 09:40:49
<div class="outer">
   <div class="target">
      <div class="filler">
      </div>
   </div>
</div>

.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 absolument positionné, vous pouvez le centrer en le déplaçant à 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 width:auto ). La position de l'élément parent peut être statique, absolue, relative ou fixe.

4
répondu West1 2015-08-19 01:57:45

par défaut, div les éléments sont affichés comme des éléments de bloc, de sorte qu'ils ont une largeur de 100%, ce qui rend leur centrage inutile. Comme suggéré par Arief, vous devez spécifier un width et vous pouvez ensuite utiliser auto en spécifiant margin pour centrer un div .

alternativement, vous pouvez aussi forcer display: inline , mais alors vous auriez quelque chose qui se comporte à peu près comme un span au lieu d'un div , de sorte que ne faire beaucoup de sens.

3
répondu Adam Bellaire 2008-11-12 13:52:56

cet élément centrera un élément tel qu'une liste ordonnée, ou une liste non ordonnée, ou tout autre élément. Il suffit de l'envelopper avec une Div avec la classe de l'élément extérieur et donner à l'élément intérieur la classe de l'élément intérieur.

la classe outerelement représente IE, Old Mozilla, et la plupart des nouveaux navigateurs.

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

.innerElement {
    position: relative;
    left: -50%;
} 
3
répondu Greg Benner 2012-11-17 18:03:49

utiliser css3 flexbox avec les justifier-contenu:center;

    <div class="row">
         <div class="col" style="background:red;">content1</div>
          <div class="col" style="">content2</div>
    </div>


.row {
    display: flex; /* equal height of the children */
    height:100px;
    border:1px solid red;
    width: 400px;
    justify-content:center;
}
3
répondu zloctb 2015-11-21 11:57:53

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

1
répondu Kon 2008-11-12 13:53:57

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

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

C'est dérivée à partir de cet article -> http://www.quirksmode.org/css/clearing.html

Ici est HTML modifié:

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

et voici 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 c'est mieux sans div.clear (à part qu'il se sent mal d'avoir un élément vide) est une assignation de marge trop zélée de 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>

puis, dans Firefox (8.0 au moment de l'écriture), 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 correspond bien aux dimensions de l'écran.

1
répondu Alexander Pogrebnyak 2017-05-23 12:03:05

essayez ce nouveau CSS et markup

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

1
répondu Shinov T 2012-05-18 06:10:20
<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 "for".product_container "la div" outer-center " chevauchera d'autres contenus voisins à sa droite. Tous les liens ou boutons à la droite de "outer-center" ne fonctionnera pas. Essayez la couleur de fond pour "outer-center" pour comprendre le besoin de" débordement :caché "

1
répondu Cicil Thomas 2012-08-10 09:53:22

j'ai trouvé une solution intéressante, je faisais du slider et j'ai dû centrer les commandes de glissade et j'ai fait ceci et fonctionne très bien. Vous pouvez également ajouter une position relative à la position du parent et déplacer l'enfant verticalement. Regardez 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>
1
répondu Nikola 2013-06-04 22:53:12

Faire display:table; et mettre margin à auto

morceau Important de code:

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

peu importe le nombre d'éléments que vous avez maintenant il s'alignera automatiquement dans le centre

exemple dans l'extrait de code:

.relatedProducts {
    display: table;
    margin-left: auto;
    margin-right: auto;
}
a {
  text-decoration:none;
}
<div class="row relatedProducts">
<div class="homeContentTitle" style="margin: 100px auto 35px; width: 250px">Similar Products</div>
					
<a href="#">test1 </a>
<a href="#">test2 </a>
<a href="#">test3 </a>
</div>
1
répondu Alexandros 2014-10-30 10:40:17

fixation merdique, 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:

<center>
<table border="0" cellspacing="0">
  <tr>
    <td>
<div id="mainContent">
1<br/>
<br/>
123<br/>
123<br/>
123<br/>
</div><div id="sidebar"><br/>
</div></td>
</tr>
</table>
</center>
0
répondu Lionel 2010-03-26 10:55:57

Simple correctif qui fonctionne dans les navigateurs plus anciens (mais ne l'utilisation de tables, et nécessite une hauteur à définir):

<div style="width:100%;height:40px;position:absolute;top:50%;margin-top:-20px;">
  <table style="width:100%"><tr><td align="center">
    In the middle
  </td></tr></table>
</div>
0
répondu Craigo 2012-08-03 07:35:21
<style type="text/css">
.container_box{
    text-align:center
}
.content{
    padding:10px;
    background:#ff0000;
    color:#ffffff;

}

utiliser la portée des divs internes

<div class="container_box">
   <span class="content">Hello</span>
</div>
0
répondu somebody 2013-04-21 15:20:42

je sais que cette question Est ancienne, mais je m'y attaque. Très similaire à la réponse de bobince, mais avec un exemple de code de travail.

faites de chaque produit un bloc en ligne. Centrer le contenu du récipient. Faire.

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

<style>
.products{
    text-align:center;
}

.product{
    display:inline-block;
    text-align:left;

    background-image: url('http://www.color.co.uk/wp-content/uploads/2013/11/New_Product.jpg');
    background-size:25px;
    padding-left:25px;
    background-position:0 50%;
    background-repeat:no-repeat;
}

.price {
    margin:        6px 2px;
    width:         137px;
    color:         #666;
    font-size:     14pt;
    font-style:    normal;
    border:        1px solid #CCC;
    background-color:   #EFEFEF;
}
</style>


<div class="products">
    <div class="product">
        <div class="price">R$ 0,01</div>
    </div>
    <div class="product">
        <div class="price">R$ 0,01</div>
    </div>
    <div class="product">
        <div class="price">R$ 0,01</div>
    </div>
    <div class="product">
        <div class="price">R$ 0,01</div>
    </div>
    <div class="product">
        <div class="price">R$ 0,01</div>
    </div>
    <div class="product">
        <div class="price">R$ 0,01</div>
    </div>
</div>

voir aussi: centre en ligne-blocs avec largeur dynamique en CSS

0
répondu Wray Bowling 2017-05-23 12:03:05

ma solution était:

.parent {
    display: flex;
    flex-wrap: wrap;
}

.product {
    width: 240px;
    margin-left: auto;
    height: 127px;
    margin-right: auto;
}
0
répondu Byron 2017-07-17 13:13:45

ajoutez ce css à votre classe product_container

    margin: 0px auto;
    padding: 0px;
    border:0;
    width: 700px;
-7
répondu Arief 2008-11-12 13:49:49