[CSS/DIV] Risolve perfettamente il centraggio orizzontale CSS delle pagine

Un metodo CSS comune per centrare gli elementi orizzontalmente

Centrare gli elementi con CSS non è una questione banale - le stesse impostazioni legittime di centramento CSS si comportano diversamente in browser diversi. Iniziamo esaminando alcuni modi comuni per centrare gli elementi orizzontalmente in CSS.

1. Centramento con margini automatici

Il modo preferito per centrare gli elementi orizzontalmente in CSS è usare la proprietà margine—basta impostare le proprietà margine-sinistra e margine-destra su auto. Nell'uso pratico, possiamo creare un div contenitore per questi elementi che devono essere centrati. Una cosa da notare è che la larghezza del contenitore deve essere specificata:

div#container{ margin-left:auto; margine-destra:auto; larghezza: 168px; }

Questo approccio funziona molto bene nella maggior parte dei browser principali, anche IE6 su Windows può visualizzare correttamente nella sua modalità standard di conformità. Purtroppo, nelle versioni inferiori di IE, questa impostazione non ottiene un effetto di centramento. Quindi, se vuoi usare questo metodo in un progetto reale, assicurati che la versione del browser IE dell'utente non sia inferiore a 6.0.

Nonostante la mancanza di supporto, la maggior parte dei progettisti consiglia di utilizzare questo approccio il più possibile. Questo metodo è anche considerato il più corretto e ragionevole di tutti per implementare il centramento a livello di elemento con CSS.

2. Usa il test-align per ottenere il centraggio

Un altro modo per ottenere il centramento degli elementi è usare la proprietà text-align, impostare il valore della proprietà al centro e applicarlo all'elemento del corpo. È un hack fino in fondo, ma è compatibile con la maggior parte dei browser, quindi in alcuni casi è naturalmente essenziale.

Si chiama hack perché questo metodo non applica proprietà del testo al testo, ma all'elemento che costituisce il contenitore. Questo ci dà anche più lavoro. Dopo aver creato i div necessari per il layout, dobbiamo applicare la proprietà text-align al corpo secondo il seguente codice:

body{ text-align:center; }

Ci saranno problemi dopo? Tutti i discendenti del corpo sono centrati.

Pertanto, dobbiamo scrivere un'altra regola per riportare il testo all'allineamento predefinito a sinistra:

p{ text-align:left; }

È concepibile che questa regola aggiuntiva possa causare qualche disagio. Inoltre, un browser che segue davvero lo standard non cambia la posizione del contenitore, ma centra solo il testo al suo interno.

3. Utilizzare una combinazione di margini automatici e allineamento del testo

Poiché il metodo di centramento dell'allineamento del testo ha una buona retrocompatibilità e il metodo automatico del padding è supportato anche dalla maggior parte dei browser contemporanei, molti progettisti utilizzano una combinazione dei due per massimizzare il supporto cross-browser per l'effetto di centraggio:

body{ text-align:center; } #container{ margine-sinistra:auto; margine-destra:auto; bordo:1pxsolido; larghezza: 168px; testo-align:sinistra }

Ma questo è sempre un trucco, e non è certo perfetto. Dobbiamo ancora scrivere regole aggiuntive per il testo nel contenitore centrato, ma almeno appare bene in vari browser.

4. Soluzione a margine esterno negativo

Le soluzioni a margini negativi sono tutt'altro che semplici come aggiungere margini negativi agli elementi. Questo metodo richiede l'uso sia della tecnica di posizionamento assoluto che di quella a margine negativo.

Di seguito è riportato il metodo specifico di implementazione di questo schema. Per prima cosa, crea un contenitore con elementi centrati e posizionalo assolutamente per il 50% del bordo sinistro della pagina. In questo modo, il margine sinistro del contenitore inizierà al 50% della larghezza della pagina.

Poi, imposta il valore del margine sinistro del contenitore a metà della larghezza negativa del contenitore. Questo fissa il contenitore a metà della direzione orizzontale della pagina.

#container{ background:#ffcurl(mid.jpg)repeat-ycenter; posizione: assoluta; sinistra: 50%; larghezza: 760px; margine-sinistra:-380px; }

Guarda, niente trucchi! Anche se questa non è la soluzione preferita, è un buon modo per farlo ed è molto versatile – sorprendentemente non funziona nemmeno in NetscapeNavigator 4.x senza problemi, vero? Quindi, se vuoi la gamma più ampia di supporto per browser, questo metodo sarà la scelta migliore.