Share
Non c'è niente di particolarmente impressionante nel centrare orizzontalmente il contenuto; lo hai fatto per anni. Ma per quanto riguarda il centraggio verticale del contenuto a altezza variabile? In questo video del mio corso, 6 progetti Flexbox per web designer, imparerai come Flexbox affronta questo problema con il minimo sforzo.
In questo tutorial, ti mostrerò quanto è facile usare il modello Flexbox per centrare orizzontalmente e verticalmente qualsiasi parte di contenuto che vuoi centrare.
Inizia andando alla penna di partenza per questo progetto su CodePen e fai clic su Forchetta per aprire una nuova copia. Faremo le nostre modifiche a questa nuova copia.
Diamo prima un'occhiata al codice HTML.
Quindi quello che abbiamo qui è uno striscione e tutto è contenuto in un div con una classe di bandiera. All'interno di questo abbiamo un altro div con una classe di banner-text. E poi abbiamo un h1, h3, e h6 elemento che contiene tutto il nostro testo. Quindi tutti e tre gli elementi di testo sono contenuti in questo div che ha una classe di banner-text.
Quindi all'interno del nostro CSS, abbiamo impostato il banner.
Se saltiamo giù al bandiera classe, abbiamo impostato il colore del testo in bianco. Abbiamo creato un'immagine di sfondo. L'abbiamo posizionato e dimensionato e impostato la sua altezza a 300 pixel. E abbiamo applicato alcuni stili ai tre elementi di testo che sono all'interno del nostro banner, il nostro h1, h3, e h6.
Abbiamo impostato i margini su zero in modo che siano belli e aderenti uno accanto all'altro e abbiamo impostato un'ombra di testo dietro quel testo. E poi ci sono anche altre regole che puoi guardare attraverso.
Quello che voglio mostrarti a questo punto è il modo in cui io abituato a allineare verticalmente e orizzontalmente il nostro testo.
Allineare orizzontalmente il nostro testo è molto semplice. Quindi potremmo entrare nella regola per i nostri tre titoli, h1, h3 e h6, all'interno del nostro banner, e semplicemente impostare il text-align a centro.
La parte difficile è centrare verticalmente il nostro testo.
Se hai solo una riga di testo, puoi facilmente centrarla verticalmente impostando l'altezza della linea in modo che abbia la stessa altezza del contenitore. Quindi il nostro contenitore è il banner stesso che è alto 300 pixel, quindi se avessimo solo una riga di testo potremmo impostare l'altezza della linea a 300 pixel e che il testo sarebbe centrato verticalmente.
Ma cosa succede se hai diverse righe di testo? Cosa succede se hai un paragrafo di testo? Che cosa succede se si dispone di una combinazione di testo e immagini e si desidera che un intero blocco di contenuto sia centrato verticalmente?
Bene, il modo in cui lo facevo era solo guardarlo. Quindi vorrei creare una nuova regola per .banner-text e giocare un po 'con esso, aumentando il riempimento superiore a vari valori fino a quando non sembrava giusto.
Ma il modo antiquato non è sempre affidabile, perché cosa succede se qualcuno supera le dimensioni del testo fino al punto in cui non è più centrato? Non hai il pieno controllo su di esso in quel modo.
Flexbox ci consente di centrare verticalmente il nostro testo molto più facilmente e con maggiore precisione rispetto alla vecchia maniera.
Quando usiamo il modello Flexbox, non abbiamo nemmeno bisogno di una regola per il banner-text classe. Tutto quello che dobbiamo fare è che dobbiamo occuparci del contenitore flessibile, che sarà il nostro bandiera classe.
Il bandiera class rappresenta il div che è il genitore di quel testo. Quindi dentro la regola per il bandiera classe, stiamo andando a impostare il nostro display a flettere.
Poi dentro il nostro bandiera regola, dopo display: flex, facciamo un altro paio di cose. Aggiungiamo justify-content: center, che è il modo in cui centreremo orizzontalmente tutto.
E poi l'ultima cosa che dobbiamo fare è capire come centrare le cose in verticale.
Quindi possiamo allineare gli oggetti lungo l'asse principale usando justify-contenuti. Ma possiamo allineare gli oggetti lungo l'asse trasversale usando un'altra proprietà chiamata allineare-articoli.
Se lo facessimo flex-start, il testo apparirà in alto. Se lo abbiamo cambiato flex-end, sarebbe in fondo. Abbiamo anche accesso allo stesso valore di centro, che centrerà verticalmente il nostro testo.
Così questo allineare-articoli la proprietà è esattamente la stessa cosa del justify-contenuti proprietà, ma percorre l'asse trasversale anziché l'asse principale. Quando creiamo un contenitore flessibile usando display: flex, per impostazione predefinita è impostato su una riga anziché su una colonna, in modo che il nostro asse principale sia il nostro asse orizzontale. Così la justify-contenuti sta andando lungo il nostro asse orizzontale, e il allineare-articoli la proprietà va lungo l'asse trasversale, che è, in questo caso, l'asse verticale.
Ecco come appare alla fine:
Puoi trovare tutto il codice per l'effetto finito su CodePen.
Il modello CSS Flexbox sta iniziando a vedere un uso più diffuso e ora è supportato in tutti i principali browser. Nel corso completo, 6 progetti Flexbox per web designer, svilupperemo il mio corso CSS precedente: Flexbox Essentials e delineamo sei progetti pratici di CSS per l'uso quotidiano.
Abbiamo anche creato una guida completa per aiutarti a imparare i CSS online, sia che tu stia appena iniziando con le basi o se desideri esplorare CSS più avanzati. Dai un'occhiata Learn CSS: The Complete Guide.
Accentsconagua