.label { display: flex; align-items: center; }Pictograma și textul au o linie vizuală comună.
LECȚIA 54 DIN 100
Centrează elementele pe axa transversală
Aliniază pictograma și textul unei etichete pe verticală.
PASUL 1 · ÎNVAȚĂ
Cum funcționează
Într-un container flex cu direcția row, axa transversală este verticală. align-items: center aliniază marginile elementelor astfel încât centrele lor să coincidă pe acea axă.
.label { display: flex; align-items: flex-start; }flex-start aliniază muchiile de început, nu centrele elementelor cu înălțimi diferite.
PASUL 2 · APLICĂ
Exercițiul tău
Activează Flexbox și centrează elementele pe axa transversală.
index.htmlCSS
Rezultat sigurizolat
Ciorna se păstrează doar în acest browser.HTML și CSS permise · scripturile și rețeaua sunt blocate
PASUL 4 · VERIFICĂ
Ce trebuie să treacă
0%neverificat
- ○Eticheta folosește Flexbox.
- ○Elementele sunt centrate pe axa transversală.
- ○Elementul țintă este prezent în pagină.
Explică-mi logica rezolvării
align-items controlează alinierea comună a tuturor elementelor flex pe axa transversală.