Comment puis-je centrer un div sans connaître la largeur?

J'ai regardé cela et les perspectives semblent sombres. Je ne suis pas intéressé par l'utilisation d'une table. J'ai 6 ou plus d'un 'élément' en-blocs qui composent un menu. C'est lisse, sauf que tous les 'a' éléments sont mis à width: auto; pour adapter leur texte. Sans largeur explicite, je ne peux pas les aligner au centre. J'ai un conteneur div et un enfant div qui entoure mes 'éléments'.Comment puis-je centrer un div sans connaître la largeur?

Des pensées? Merci Mike

Source

2009-07-14 Mike

pourrait vous fournissez un échantillon du HTML et du CSS? – ylebre

Vous pouvez définir le style de la un élément à margin: 0 auto, mais cela ne fonctionne pas dans IE6. Dans IE6, vous devez définir l'emballage div text-align: center, et (éventuellement) définir le texte d'alignement pour le un élément retour à text-align: left

Source

2009-07-14 07:38:22

J'avais besoin que le div enfant soit positionné de façon relative w/text-align: center. Cela a résolu le problème. Merci! – Mike

<div style="width: auto; margin-left: auto; margin-right: auto"> 
div content 
</div>

sera aligner le centre sur la page

Source

2009-07-14 07:40:16

ne fonctionnera pas dans IE6 –

Ne fonctionnera pas dans Safari sans une largeur explicite et c'est le navigateur pour lequel je suis en train de développer. – Mike

Vous devez définir margin: 0 auto; sur le div conteneur externe, ajouter text-align: center; sur le div interne; et utilisez une liste non ordonnée pour construire votre menu en premier lieu. L'élément div prendra tout l'espace de largeur de l'élément de conteneur s'il n'est pas défini une valeur de largeur.

Source

2009-07-14 07:40:47

Donc, si vous voulez centrer une div, vous devez définir une largeur ...

Une solution à votre problème (si je le comprendre) peut être:

<div style="text-align:center;"><span>[... yours content ...]</span></div>

où votre div a est devenu une envergure et une nouvelle div met la durée au centre. J'espère que cela peut vous aider! Salut, Alberto

Source

2009-07-14 07:48:22 Alberto

Sans définir une largeur explicite, la balise <div> s'étendra automatiquement à 100% de la largeur de son parent. Par conséquent, le réglage margin: 0 auto; le placera au centre - avec 0px à gauche et à droite.

Source

2009-07-14 07:52:25 Kerrick

-1

Si vous en avez besoin centré et que vous réduisez/agrandissez dynamiquement pour accepter le contenu sans connaître la largeur, votre seule option consiste à utiliser une table. C'est le seul élément élastique du répertoire HTML.

<table style="margin-left:auto;margin-right:auto;"> 
    <tr> 
     <td> 
      Whatever... 
     </td> 
    </tr> 
</table>

P.S. Vous pouvez avoir un div à réduire dynamiquement aussi bien en définissant la propriété float à float: left ou float: right. Donc, ça va coller à gauche ou à droite, mais vous ne pouvez pas l'avoir centré de cette façon.

Source

2009-07-14 08:04:13 User

Mon conseil est cette réponse - mais quelqu'un a commenté que cela ne fonctionnerait pas dans IE6.Voici comment faire ce travail:

<div id="container"> 
    <div id="centeredBlock">centered</div> 
</div> 

#container { 
    text-align: center; 
} 

#centeredBlock { 
    margin: 0 auto; 
    text-align: left; 
    width: 50%; 
}

Source

2009-07-14 08:18:09 Ross