Share
Chris Coyier ha recentemente pubblicato un albero decisionale sul suo sito, CSS Tricks, per dimostrare una pletora di modi per centrare orizzontalmente o verticalmente le cose usando i CSS. Come soluzioni autonome, tutte hanno i loro avvertimenti, ma combinate sono uno strumento di centraggio inarrestabile che funziona in cross-browser in IE8 e costantemente aggiornato.
Questo è come lo fai.
Nota: per coprire tutte le basi ho fornito la spiegazione in formato video e scritto.
Scarica video o iscriviti a Tuts + Web Design su Youtube
Se stai creando un sito web reattivo, molto probabilmente ridimensionerai i tuoi elementi con percentuali, quindi rendiamoli arbitrari .contenitore elemento:
...
.contenitore larghezza: 70%; altezza: 70%; margine: 40px auto; sfondo: rosso;
Per assicurarci che il nostro elemento di contenimento si estenda in modo appropriato, impostiamo html, body width: 100%; altezza: 100%; .
Ora, dentro quello .contenitore, avremo il centraggio verticale con il modello di tavolo comune. Ciò richiede normali elementi a livello di blocco e li fa comportarsi come celle di una tabella, dandoci un centramento verticale:
...
.outer display: table; larghezza: 100%; altezza: 100%; .inner display: table-cell; allineamento verticale: medio; allineamento del testo: centro;
Infine, aggiungeremo un elemento centrato orizzontalmente:
...
.centrato posizione: relativa; display: blocco in linea; larghezza: 50%; imbottitura: 1em; sfondo: arancione; colore bianco;
Al suo interno, puoi posizionare qualsiasi cosa il tuo cuore desideri, compresi i blocchi di testo ad altezza dinamica o elementi posizionati in modo assoluto.
Demo su GitHub
Per modificare il centraggio orizzontale dell'elemento, basta modificare .interno'S text-align proprietà. Per modificare il centraggio verticale, modificare .interno'S vertical-align proprietà.
Questo esempio può sembrare un sacco di markup, ma i pezzi da lavorare sono solo tre divS: .esterno, .interno, e.centrato. E lo stile per questi è coerente, quindi puoi usare questo nel tuo CSS standard per i progetti e non preoccuparti mai più.
È un elemento in più più grande della maggior parte delle tecniche di centraggio e completamente a prova di proiettile. La mia speranza è che questo diventi l'approccio standard e possiamo finalmente smettere di preoccuparci di centrare il CSS.
Accentsconagua