2010-02-17 16 views
13

Ciao a tutti,come ottenere div contenitore principale di allineare al centro

ho allways sono chiesto come altre persone ottengono per allineare al centro del contenitore div principale, come l'unico modo riesco finora è l'aggiunta al file css il seguente:

* { padding: auto; margine: auto; allineamento del testo: centro; }

ho visto altre pagine utilizzando: * {padding: 0px; margin: 0px} ma non posso vedere dove o che cosa fanno, per centralizzare il contenitore principale.

Qualcuno potrebbe spiegare come?

Codice esempio:

<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta content="text/html; charset=windows-1252" http-equiv="Content-Type" /> 
<title>This is the main container</title> 
<style type="text/css"> 
*{ 
padding:auto; 
margin:auto; 
text-align:center; 
} 
</style> 
</head> 
<body> 
<div style="width:400px;background-color:#66FFFF;display:block;height:400px;"> 
<b>This is the main container.</b> 
</div> 
</body> 
</html> 

Qualcuno potrebbe spiegare come lo fanno nella pagina seguente? http://www.csszengarden.com/?cssfile=/179/179.css&page=4

Grazie

+0

anche si può avvolgere il contenuto con i

, ma meglio la soluzione è al di sotto – ant

+1

sulla pagina si è collegato al fanno usare auto di margine sul contenitore.Tuttavia, il riempimento automatico non è richiesto e potrebbe persino confondere alcuni browser. – wheresrhys

+0

@wheresrhys: Grazie, non posso trovarlo sul css. – Amra

risposta

31

Non usare il selettore * come che si applicano a tutti gli elementi della pagina. Supponiamo di avere una struttura come questa:

... 
<body> 
    <div id="content"> 
     <b>This is the main container.</b> 
    </div> 
</body> 
</html> 

È quindi possibile centrare il #content div utilizzando:

#content { 
    width: 400px; 
    margin: 0 auto; 
    background-color: #66ffff; 
} 

Non so quello che hai visto altrove, ma questa è la strada da percorrere. Lo snippet * { margin: 0; padding: 0; } che hai visualizzato serve per reimpostare le definizioni predefinite del browser per tutti i browser in modo che il tuo sito si comporti in modo simile su tutti i browser, ciò non ha nulla a che fare con il centraggio del contenitore principale.

La maggior parte dei browser applica un margine e un riempimento predefiniti ad alcuni elementi che di solito non sono coerenti con le implementazioni di altri browser. Questo è il motivo per cui è spesso considerato intelligente utilizzare questo tipo di "ripristino". Il reset frammento avete presentato è il più semplice dei fogli di stile azzerato, è possibile leggere di più su questo argomento qui:

+0

+1 per la tua risposta .. – ant

+0

Non è consigliabile applicare * {padding: 0px; margin: 0px;}, per renderlo compatibile con più browser? – Amra

+1

@ Cesare Lopes, secondo me lo è, ma sembra che ci siano persone che la pensano diversamente. Ma direi di andare avanti. –

1

vorrei omettere la dichiarazione * { text-align:center }, come si imposta l'allineamento al centro per tutti gli elementi .

Di solito con un contenitore larghezza fissamargin: 0 auto dovrebbe essere abbastanza

2

È possibile text-align: il centro del corpo per centrare il contenitore. Quindi allineare il testo: lasciato il contenitore per ottenere tutto il testo, ecc. Per allineare a sinistra.

+0

Welcome to Stack Overflow =) Prenditi un momento per leggere la pagina di aiuto [Stack Overflow Markdown] (http://stackoverflow.com/editing-help/) per indicazioni su come formattare le tue risposte. –

2

Il principio di base della centratura di una pagina è di avere un corpo CSS e un main_taintainer CSS. Dovrebbe apparire qualcosa di simile:

body { 
    margin: 0; 
    padding: 0; 
    text-align: center; 
} 
#main_container { 
    margin: 0 auto; 
    text-align: left; 
} 
Problemi correlati