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>
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;
}
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".
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;
}
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>
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!
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)
<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.
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.
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%;
}
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;
}
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 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.
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;
}
<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é "
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>
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>
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>
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>
<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>
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
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;