Unlimited Wordpress themes, plugins, graphics & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Web Design
  2. CSS
Webdesign

Come creare testo perfettamente centrato con Flexbox

by
Difficulty:IntermediateLength:ShortLanguages:

Italian (Italiano) translation by Marco Calcanti (you can also view the original English article)

Non c'è niente di particolarmente impressionante su come centrare orizzontalmente il contenuto; lo hai fatto per anni. Ma cosa ne pensi sulla centratura verticalmente su contenuto di altezza variabile? In questo video dal mio corso, 6 Flexbox progetti per il Web designer, apprenderai come Flexbox affronta questo problema con il minimo sforzo.

Come creare contenuto perfettamente centrato con Flexbox

Introdurre il progetto in CodePen

In questo tutorial, vi mostrerò quanto è facile utilizzare il modello Flexbox al centro orizzontalmente e verticalmente qualsiasi pezzo di contenuto che si desidera centrare.

Inizia andando sulla penna di partenza per questo progetto su CodePen e clicca su fork per aprire una nuova copia. Faremo i nostri cambiamenti a questa nuova copia.

Esaminiamo il codice HTML prima.

Flexbox starting HTML

Quindi quello che abbiamo qui è un banner, e tutto quanto è contenuto in un div con una classe banner. Al suo interno abbiamo un altro div con una classe di banner-text. E poi abbiamo un elemento h1 , h3 e h6  che contiene tutto il nostro testo. Così tutti e tre gli elementi sono contenuti all'interno di questo div con una classe di banner-text.

Quindi all'interno del nostro CSS, abbiamo creato il banner.

Starting CSS

Se saltiamo fino alla classe banner, abbiamo creato il nostro colore di testo su bianco. Abbiamo creato un'immagine di sfondo. L'Abbiamo posizionato, dimensionato e impostato la sua altezza su 300 pixel. E abbiamo applicato alcuni stili per i tre elementi di testo che si trovano all'interno del nostro banner, h1, h3 e h6.

Abbiamo impostato i margini a zero in modo che sono belli da vedere vicini al prossimo, e abbiamo fissato un ombra di testo dietro al testo. E poi ci sono anche altre regole che puoi guardare.

Il vecchio modo di centratura del testo

Quello che voglio mostrarvi a questo punto è il modo in cui ho usato per l'allineamento verticale e orizzontale del nostro testo.

Allineamento orizzontale del nostro testo è molto facile da fare. Cosìcchè potevamo solo andare nella regola per i nostri tre titoli, h1, h3 e h6, all'interno del nostro banner e semplicemente impostare text-align a center.

La parte più difficile è centrare verticalmente il nostro testo.

Se avete solo una riga di testo, potete facilmente centrarla verticalmente impostando l'altezza della riga alla stessa altezza del contenitore. Così il nostro contenitore è il banner stesso che è di 300 pixel di altezza, quindi se avessimo avuto solo una riga di testo potevamo impostare la nostra altezza di linea a 300 pixel e quel testo sarebbe centrato verticalmente.

Ma cosa fare se avete molte righe di testo? Cosa fare se avete un paragrafo di testo? Se si dispone di una combinazione di testo e immagini, e si desidera un intero blocco di contenuto da essere centrato verticalmente?

Beh, il modo che ho usato per farlo si vede a occhio nudo. Così vorrei creare una nuova regola per il .banner-text e giocarci un pò, aumentando la parte superiore del padding per vari valori diversi fino a quando si vede correttamente.

Ma la vecchia maniera non è sempre affidabile perché se qualcuno esegue l'override delle dimensioni del testo al punto dove non è centrata più? Non hai il controllo completo su di esso in questo modo.

Centratura del testo con Flexbox

Flexbox permette di centrare verticalmente il nostro testo molto più facilmente e più accuratamente rispetto alla vecchia maniera.

Quando usiamo il modello Flexbox, non abbiamo bisogno di una regola per la classe banner-text. Tutto quello che dobbiamo fare è che abbiamo bisogno di gestire il contenitore flex, che sarà la nostra banner class.

Il banner class rappresenta l'elemento div che è il genitore di quel testo. Così dentro la regola per la classe banner, dobbiamo impostare il nostro display a flex.

Quindi all'interno della nostra regola banner, dopo display: flex, facciamo un paio di altre cose. Aggiungiamo justify-content: center, che è come noi andremo a centrare verticalmente ogni cosa.

E poi l'ultima cosa che dobbiamo fare è capire come centrare verticalmente le cose.

Così siamo in grado di allineare gli elementi lungo l'asse principale utilizzando justify-content. Ma siamo in grado di allineare gli elementi lungo l'asse trasversale utilizzando un'altra proprietà denominata align-items.

Se l'avessimo fatto a flex-start, il testo apparirebbe nella parte superiore. Se l'avessimo cambiato a flex-end, sarebbe nella parte inferiore. Abbiamo anche accesso allo stesso valore del center, che centra verticalmente il nostro testo.

Quindi questa proprietà align-items è la stessa cosa come la proprietà di justify-content, ma va lungo l'asse trasversale invece dell'asse principale. Quando si crea un contenitore flex tramite display: flex, di default è impostato a una riga invece di una colonna, cosicché il nostro asse principale è il nostro asse orizzontale. Così justify-content andrà lungo il nostro asse orizzontale, e la proprietà align-items va lungo l'asse trasversale, che è, in questo caso, l'asse verticale.

Ecco come appare alla fine:

Troverete tutto il codice per l'effetto finito su CodePen.

Guarda il corso completo

Il modello CSS Flexbox sta iniziando a vedere un uso più ampio ed è ora supportato in tutti i principali browser. Nel corso completo, 6 Flexbox progetti per il Web designer, costruiremo all'inizio di CSS: Flexbox Essentials del corso e descriviamo sei progetti CSS pratici per l'uso quotidiano.

Abbiamo anche costruito una guida completa per aiutarvi a imparare CSS online, se hai appena iniziato con le nozioni di base o si desidera esplorare più avanzato CSS. Scopri imparare CSS: la guida completa.

Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.