Come posso centrare allineare un div senza conoscere la larghezza?

Ho esaminato questo aspetto e l'outlook sembra deprimente. Non mi interessa usare un tavolo. Ho 6 o più blocchi in linea di "un elemento" che compongono un menu. È scorrevole, tranne che tutti gli "elementi" sono impostati in larghezza: auto; per accogliere il loro testo. Senza una larghezza esplicita, non sono in grado di centrarli allineati. Ho un contenitore div e un div bambino che avvolge i miei "elementi".Come posso centrare allineare un div senza conoscere la larghezza?

Qualche idea? Grazie Mike

fonte

2009-07-14 Mike

Potrebbe fornisci un campione di HTML e CSS? – ylebre

È possibile impostare lo stile del un elemento da margin: 0 auto, ma che non funziona in IE6. In IE6, è necessario impostare il div wrapper per text-align: center, e (opzionalmente) impostare il testo-allineamento per la un elemento torna a text-align: left

fonte

2009-07-14 07:38:22

Avevo bisogno che il div child fosse posizionato in modo relativo w/text-align: center. Questo ha risolto il problema. Grazie! – Mike

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

volontà allinea il centro alla pagina

fonte

2009-07-14 07:40:16

non funzionerà in IE6 –

Non funzionerà in Safari senza una larghezza esplicita e questo è il browser per il quale sto sviluppando. – Mike

È necessario impostare margin: 0 auto; sul div contenitore esterno, aggiungere text-align: center; sul div interno; e usa una lista non ordinata per costruire il tuo menu in primo luogo.

fonte

2009-07-14 07:40:47

l'elemento div occuperà tutto lo spazio della larghezza dell'elemento contenitore se non è impostato un valore di larghezza.

Quindi, se si vuole centrare un div è necessario impostare una larghezza ...

Una soluzione al vostro problema (se ho capito bene) può essere:

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

dove il vostro div ha diventa una campata e un nuovo div mette la campata al centro. Spero che questo possa aiutarti! Ciao, Alberto

fonte

2009-07-14 07:48:22 Alberto

Senza impostare una larghezza esplicita, il tag <div> si espanderà automaticamente al 100% della larghezza del suo genitore. Pertanto, l'impostazione di margin: 0 auto; lo renderà centrale, con 0px sia a sinistra che a destra.

fonte

2009-07-14 07:52:25 Kerrick

-1

Se è necessario centrato e si riduce o si espande in modo dinamico per adattarsi al contenuto senza conoscere la larghezza, l'unica opzione possibile è l'utilizzo di una tabella. È l'unico elemento elastico nel repertorio HTML.

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

P.S. Puoi anche dividere dinamicamente il div in modo che riduca dinamicamente la proprietà float: left o float: right. Quindi rimarrà a sinistra oa destra, ma non puoi centrarlo in questo modo.

fonte

2009-07-14 08:04:13 User

Il mio consiglio è questa risposta - tuttavia qualcuno ha commentato che non avrebbe funzionato in IE6.Ecco come fare questo lavoro:

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

#container { 
    text-align: center; 
} 

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

fonte

2009-07-14 08:18:09 Ross