Centrer div avec une largeur inconnue

j'ai div <div id="container"></div> qui contient tout le contenu de la page, y compris le pied de page d'en-tête, etc.Centrer div avec une largeur inconnue

donc je voudrais centrer cette div au centre de ma page, maintenant j'ai cette css:

#page{ 
position:relative; 
margin:auto; 
width:1000px; 
}

et cela fonctionne, mais mon problème est que le contenu de cette div ne cesse de changer de sorte que les changements de largeur trop, il peut être 1000px ou 10100px donc je besoin de quelque chose comme width:auto;, comment peut faire quelque chose comme ça?

Source

2011-11-22 Linas

Voulez-vous dire: http://stackoverflow.com/questions/210717/using-jquery-to-center-a-div-on-the-screen? –

@Michael Je ne pense pas qu'il ait des problèmes avec le centrage (titre déroutant dans ce cas). Si vous lisez la question, il a des problèmes avec la largeur du contenu. – jadarnel27

Demandez-vous comment centrer horizontalement un élément avec une largeur inconnue? – thirtydot

Voir:http://jsfiddle.net/thirtydot/rjY7F/

HTML :

<div id="container"> 
    i'm as wide as my content 
</div>

CSS:

body { 
    text-align: center; 
} 
#container { 
    text-align: left; 
    border: 1px solid red; 
    display: inline-block; 
    /* for ie6/7: */ 
    *display: inline; 
    zoom: 1; 
}

Source

2011-11-22 14:47:43 thirtydot

merci cela fonctionne parfaitement – Linas

Brillant. Je vous remercie. –

J'ai juste édité votre jsfiddle et ai enlevé tout le style pour '# container' et cela fonctionne toujours. Je suppose que le 'text-align' sur' body' fait l'affaire? Testé dans Firefox. –

qu'en pensez-vous?

body { 
    text-align: center; 
} 
#container { 
    text-align: left; 
}

En supposant <body><div id="container"></div></body>

Source

2011-11-22 14:42:18 PiTheNumber

Une façon est de créer une enveloppe autour de votre élément #page, appelons-le #wrapper:

#wrapper { 
    position: relative; 
    left: 50%; 
    float: left; 
} 
#page { 
    position: relative; 
    left: -50%; 
    float: left; 
}

Cela permettra à la #page div reste une largeur variable.

Source

2011-11-22 14:45:24

meilleure solution ici – Tunarock

Cela vous donnera un div dinamically taille qui reste au centre du corps et est la plus petite taille nécessaire pour adapter le contenu:

body { text-align: center; } 
div.container { display: inline-block; text-align: left; }

Source

2011-11-22 14:47:04 Viruzzo

Centrer div avec une largeur inconnue

Répondre

Questions connexes