Questo articolo mostra come allineare verticalmente il testo all'interno di un flexbox:
Metodo 1: utilizzo della proprietà 'align-item'.
Per allineare verticalmente il testo, gli utenti possono utilizzare il ' align-elemento ” proprietà fornita da CSS. Aiuta gli elementi a impostare il loro allineamento all'interno del flexbox. Le possibili posizioni di allineamento verticale possono trovarsi alla “ superiore ”, mezzo ', O ' metter il fondo a ' lato.
Di seguito sono riportate le dimostrazioni pratiche per l'allineamento degli elementi in queste direzioni:
Esempio 1: Posizione superiore
Per allineare il testo all'interno del flexbox nella posizione in alto, il ' avvio flessibile ” valore viene fornito al “ align-elementi ' proprietà. Questa proprietà è assegnata al div principale che verrà visualizzato come flex. Supponiamo, il div con una classe di ' verticale ” viene creato nel file HTML. Quindi nel file CSS, seleziona quella classe e assegna le seguenti proprietà:
.verticale {
colore : bianco ;
altezza : 150 pixel ;
Schermo : flettere ;
padding-sinistra : 20px ;
align-elementi : avvio flessibile ;
colore di sfondo : verde foresta ;
}
- Innanzitutto, lo stile e l'allineamento di base vengono assegnati al div utilizzando le proprietà color, background-color e height dei CSS.
- Anche la proprietà 'display' è impostata su 'flex' per renderlo un flexbox.
- Infine, per visualizzare il testo all'inizio del flexbox, imposta la proprietà 'align-items' su 'flex-start.
Dopo aver eseguito il codice sopra, la pagina web si presenta così:
L'output mostra che il testo è ora allineato nella posizione superiore all'interno del flexbox.
Esempio 2: posizione centrale
Per allineare verticalmente il testo nella posizione centrale, impostare ' centro ” valore al CSS “ align-elementi ' proprietà:
.verticale {colore : bianco ;
altezza : 150 pixel ;
Schermo : flettere ;
padding-sinistra : 20px ;
align-elementi : centro ;
colore di sfondo : verde foresta ;
}
Dopo l'esecuzione del codice precedente:
L'output sopra mostra che il testo è ora allineato al centro del flexbox.
Esempio 3: posizione inferiore
Per impostare il testo nella parte inferiore del flexbox, assegna il ' estremità flessibile ” valore al “ align-elementi ' proprietà. Questa volta il testo viene allineato nella posizione in cui il flexbox sta finendo significa nella parte inferiore:
.verticale {colore : bianco ;
altezza : 150 pixel ;
Schermo : flettere ;
padding-sinistra : 20px ;
align-elementi : estremità flessibile ;
colore di sfondo : verde foresta ;
}
Dopo aver eseguito il codice sopra, la pagina web si presenta così:
L'output sopra mostra che il testo è ora allineato verticalmente nella posizione inferiore.
Metodo 2: utilizzo della proprietà 'justify-content'.
IL ' giustificare il contenuto La proprietà ” può essere utilizzata anche per allineare verticalmente il testo all'interno della flexbox. Tuttavia, funziona allo stesso modo del ' allineamento del testo ” e allinea gli elementi nella direzione della riga. Quindi, per cambiare la direzione dell'allineamento, il ' direzione flessibile La proprietà ” viene utilizzata per impostare il “ giustificare il contenuto ” allineamento verso “ colonna direzione:
.verticale {altezza : 150 pixel ;
Schermo : flettere ;
padding-sinistra : 20px ;
colore : bianco ;
colore di sfondo : darkcyan ;
direzione flessibile : colonna ;
giustificare il contenuto : estremità flessibile ;
}
La spiegazione del suddetto codice è fornita di seguito:
- IL ' altezza ”, “ colore ' E ' padding-sinistra ” le proprietà funzionano proprio come il metodo precedente.
- Successivamente, imposta ' colonna ” valore al “ direzione flessibile ” della flexbox per applicare gli stili attraverso le colonne.
- Dopodiché il “ giustificare il contenuto ” allinea il testo verticalmente.
- Alla fine il “ estremità flessibile ” il valore allinea l'elemento sul “ metter il fondo a ' lato.
Nota : Gli utenti possono anche impostare ' avvio flessibile ' E ' centro ' valori al ' superiore ', E ' mezzo ” lati, rispettivamente.
Ad esempio, dopo aver eseguito il codice precedente, la pagina web si presenta così:
L'output sopra mostra che il testo è allineato nella parte inferiore del flexbox.
Conclusione
Per allineare verticalmente il testo all'interno di un flexbox, il ' align-elementi ' E ' giustificare il contenuto ” Le proprietà CSS possono essere utilizzate. Entrambe queste proprietà ottengono ' avvio flessibile ”, “ centro ' O ' estremità flessibile ” valori per allineare il testo a “ superiore ”, “ mezzo ' E ' metter il fondo a ” all'interno del flexbox, rispettivamente. Questo articolo ha dimostrato l'allineamento verticale del testo in un flexbox.