Acest articol demonstrează cum să aliniați vertical textul în interiorul unei casete flexibile:
Metoda 1: Utilizarea proprietății „align-item”.
Pentru a alinia textul pe verticală, utilizatorii pot folosi „ element-aliniere ” proprietate furnizată de CSS. Ajută elementele să își stabilească alinierea în interiorul flexbox. Posibilele poziții de aliniere verticală pot fi la „ top ”, mijloc ”, sau “ fund ' latură.
Demonstrațiile practice pentru alinierea elementelor în aceste direcții sunt prezentate mai jos:
Exemplul 1: Poziția de sus
Pentru a alinia textul din interiorul casetei flexibile în poziția de sus, „ flex-start „valoarea este furnizată pentru „ alinierea elementelor ” proprietate. Această proprietate este atribuită div-ului principal care va fi afișat ca flex. Să presupunem că div-ul cu o clasă „ vertical ” este creat în fișierul HTML. Apoi, în fișierul CSS, selectați acea clasă și atribuiți următoarele proprietăți:
.vertical {
culoare : alb ;
înălţime : 150px ;
afişa : contracta ;
padding-stânga : 20px ;
alinierea elementelor : flex-start ;
culoare de fundal : padure verde ;
}
- În primul rând, stilul și alinierea de bază sunt date div-ului folosind proprietățile de culoare, culoare de fundal și înălțime ale CSS.
- Proprietatea „display” este, de asemenea, setată la „flex” pentru a face din aceasta o flexbox.
- În cele din urmă, pentru a afișa textul la începutul casetei flexibile, setați proprietatea „align-items” la „flex-start.
După executarea codului de mai sus, pagina web arată astfel:
Ieșirea arată că textul este acum aliniat în poziția de sus în interiorul casetei flexibile.
Exemplul 2: Poziția de mijloc
Pentru a alinia vertical textul în poziția de mijloc, setați „ centru „valoare pentru CSS” alinierea elementelor ” proprietate:
.vertical {culoare : alb ;
înălţime : 150px ;
afişa : contracta ;
padding-stânga : 20px ;
alinierea elementelor : centru ;
culoare de fundal : padure verde ;
}
După executarea codului de mai sus:
Rezultatul de mai sus arată că textul este acum aliniat în centrul casetei flexibile.
Exemplul 3: Poziția de jos
Pentru a seta textul din partea de jos a casetei flexibile, atribuiți „ flex-end „valoare la „ alinierea elementelor ” proprietate. De data aceasta, textul este aliniat la poziția în care se termină flexbox înseamnă în partea de jos:
.vertical {culoare : alb ;
înălţime : 150px ;
afişa : contracta ;
padding-stânga : 20px ;
alinierea elementelor : flex-end ;
culoare de fundal : padure verde ;
}
După executarea codului de mai sus, pagina web arată astfel:
Rezultatul de mai sus arată că textul este acum aliniat vertical în poziția de jos.
Metoda 2: Utilizarea proprietății „justify-content”.
„ justifica-conținut Proprietatea ” poate fi utilizată și pentru a alinia vertical textul din interiorul flexbox. Cu toate acestea, funcționează la fel ca „ aliniere text ” și aliniază elementele în direcția rândului. Deci, pentru a schimba direcția de aliniere, „ flex-direcție ” proprietatea este utilizată pentru a seta “ justifica-conținut „alinierea către „ coloană ” direcția:
.vertical {înălţime : 150px ;
afişa : contracta ;
padding-stânga : 20px ;
culoare : alb ;
culoare de fundal : cyan închis ;
flex-direcție : coloană ;
justifica-conținut : flex-end ;
}
Explicația codului de mai sus este oferită mai jos:
- „ înălţime ”, “ culoare ' și ' padding-stânga ”Proprietățile funcționează la fel ca metoda de mai sus.
- După aceea, setați „ coloană „valoare la „ flex-direcție ” din flexbox pentru a aplica stiluri prin coloane.
- După aceea, „ justifica-conținut ” proprietatea aliniază textul pe verticală.
- În cele din urmă, „ flex-end „valoarea” aliniază elementul pe „ fund ' latură.
Notă : Utilizatorii pot seta, de asemenea, „ flex-start ' și ' centru ” valorile la “ top ', și ' mijloc ” laturi, respectiv.
De exemplu, după executarea codului de mai sus, pagina web arată astfel:
Rezultatul de mai sus arată că textul este aliniat în partea de jos a casetei flexibile.
Concluzie
Pentru a alinia vertical textul în interiorul unei casete flexibile, „ alinierea elementelor ' și ' justifica-conținut ”Proprietățile CSS pot fi utilizate. Ambele proprietăți primesc „ flex-start ”, “ centru ” sau ” flex-end ” pentru a alinia textul la “ top ”, “ mijloc ' și ' fund ” direcții în interiorul, respectiv, flexbox. Acest articol a demonstrat alinierea verticală a textului într-o casetă flexibilă.