Cosa sapere
- Per centrare il testo, usa il codice seguente ("[/]" indica un'interruzione di riga): .center { [/] text-align: center; [/] }.
- Centra blocchi di contenuto con il seguente codice ("[/]" indica un'interruzione di riga): .center { [/] margine: auto; [/] larghezza: 80 em; [/] }.
- Per centrare un'immagine ("[/]" indica un'interruzione di riga): img.center { [/] display: blocco; [/] margine sinistro: auto; [/] margine destro: auto; [/] }.
I CSS sono il modo migliore per centrare gli elementi, ma può essere una sfida per i web designer principianti perché ci sono tanti modi per realizzarlo. Questo articolo spiega come utilizzare i CSS per centrare testo, blocchi di testo e immagini.
Centrare il testo con i CSS
Devi conoscere solo una proprietà di stile per centrare il testo su una pagina:
.centro {
allineamento del testo: centro;
}
Con questa riga di CSS, ogni paragrafo scritto con la classe .center sarà centrato orizzontalmente all'interno del suo elemento genitore. Ad esempio, un paragrafo all'interno di una divisione (un figlio di tale divisione) verrebbe centrato orizzontalmente all'interno di.
Ecco un esempio di questa classe applicata nel documento HTML:
Questo testo è centrato.
Quando si centra il testo con la proprietà text-align, ricorda che sarà centrato all'interno dell'elemento che lo contiene e non necessariamente all'interno dell'intera pagina stessa.
La leggibilità è sempre fondamentale quando si tratta di testo del sito web. Grande blocchi di testo giustificato al centro può essere difficile da leggere, quindi usa questo stile con parsimonia. I titoli e i piccoli blocchi di testo, come il testo del teaser di un articolo, sono in genere facili da leggere quando centrati; tuttavia, blocchi di testo più grandi, come un articolo completo, sarebbero difficili da consumare se completamente giustificati al centro.
Centrare blocchi di contenuto con CSS
I blocchi di contenuto vengono creati utilizzando l'HTML.
.centro {
margine: automatico;
larghezza: 80 em;
}
Questa scorciatoia CSS per la proprietà margin imposterebbe i margini superiore e inferiore su un valore di 0, mentre i margini sinistro e destro utilizzerebbero "auto". Questo essenzialmente prende tutto lo spazio disponibile e lo divide equamente tra i due lati della finestra del viewport, centrando efficacemente l'elemento su la pagina.
Qui è applicato nell'HTML:
Questo intero blocco è centrato,ma il testo al suo interno è allineato a sinistra.
Finché il tuo blocco ha una larghezza definita, si centra all'interno dell'elemento contenitore. Il testo contenuto in quel blocco non sarà centrato al suo interno ma sarà giustificato a sinistra. Questo perché il testo è giustificato a sinistra come impostazione predefinita nei browser web. Se vuoi centrare anche il testo, puoi usare la proprietà text-align trattata in precedenza insieme a questo metodo per centrare la divisione.
Centrare le immagini con i CSS
Sebbene la maggior parte dei browser visualizzi le immagini centrate utilizzando la stessa proprietà di allineamento del testo, non è raccomandato dal W3C. Pertanto, c'è sempre la possibilità che le versioni future dei browser decidano di ignorare questo metodo.
Invece di usare text-align per centrare un'immagine, dovresti dire esplicitamente al browser che l'immagine è un elemento a livello di blocco. In questo modo, puoi centrarlo come faresti con qualsiasi altro blocco. Ecco il CSS per farlo accadere:
img.centro {
blocco di visualizzazione;
margine sinistro: auto;
margine destro: auto;
}
Ed ecco l'HTML per centrare l'immagine:
Puoi anche centrare gli oggetti usando CSS in linea (vedi sotto), ma questo approccio non è raccomandato perché aggiunge stili visivi al tuo markup HTML. Ricorda, stile e struttura dovrebbero essere separati; l'aggiunta di stili CSS all'HTML interromperà questa separazione e, in quanto tale, dovresti evitarla quando possibile.
Centrare gli elementi verticalmente con i CSS
Centrare gli oggetti verticalmente è sempre stato impegnativo nel web design, ma il rilascio del Modulo layout box flessibile CSS in CSS3 fornisce un modo per farlo.
L'allineamento verticale funziona in modo simile all'allineamento orizzontale descritto sopra. La proprietà CSS è allineata verticalmente, in questo modo:
.vcenter {
allineamento verticale: medio;
}
Tutti i browser moderni supporta questo stile CSS. In caso di problemi con i browser meno recenti, il W3C consiglia di centrare il testo verticalmente in un contenitore. Per fare ciò, posiziona gli elementi all'interno di un elemento contenitore, come a dive imposta un'altezza minima su di esso. Dichiarare l'elemento contenitore come cella di tabella e impostare l'allineamento verticale su "medio".
Ad esempio, ecco il CSS:
.vcenter {
altezza minima: 12 em;
display: cella-tabella;
allineamento verticale: medio;
}
Ed ecco l'HTML:
Questo testo è centrato verticalmente nella casella.
Non utilizzare l'elemento HTML per centrare immagini e testo; è stato deprecato e i browser Web moderni non lo supportano più. Questa, in gran parte, è una risposta alla chiara separazione tra struttura e stile di HTML5: l'HTML crea la struttura e il CSS detta lo stile. Poiché il centraggio è una caratteristica visiva di un elemento (come appare piuttosto che cosa è), quello stile viene gestito con CSS, non con HTML. Usa invece i CSS in modo che le tue pagine vengano visualizzate correttamente e siano conformi agli standard moderni.
Centratura verticale e versioni precedenti di Internet Explorer
Puoi forzare Internet Explorer (IE) a centrare e quindi utilizzare i commenti condizionali in modo che solo IE veda gli stili, ma sono un po' prolissi e poco attraenti. La decisione di Microsoft del 2015 di interrompere il supporto per versioni precedenti di IE, tuttavia, renderà questo non un problema poiché IE non sarà più utilizzato.