.icons { display: grid; justify-items: center; align-items: center; }Fiecare element este centrat orizontal și vertical în propria celulă.
LECȚIA 69 DIN 100
Centrează elementele în celulele Grid
Aliniază toate elementele pe axele inline și block ale celulelor.
PASUL 1 · ÎNVAȚĂ
Cum funcționează
justify-items stabilește alinierea implicită a elementelor pe axa inline, iar align-items pe axa block. Valoarea center centrează fiecare element în zona sa disponibilă.
.icons { display: grid; justify-content: center; }justify-content aliniază grila ca întreg când există spațiu liber; nu stabilește alinierea fiecărui element în celulă.
PASUL 2 · APLICĂ
Exercițiul tău
Activează Grid și centrează elementele cu justify-items și align-items.
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
- ○Grupul folosește Grid.
- ○Elementele sunt centrate pe axa inline.
- ○Elementele sunt centrate pe axa block.
- ○Elementul țintă este prezent în pagină.
Explică-mi logica rezolvării
Cele două proprietăți controlează alinierea implicită a copiilor Grid pe axe perpendiculare.