Вивчайте Завдання: Реалізація Абсолютного Позиціонування

Завдання

Вирівняти дочірній елемент (div з класом child) по центру батьківського елемента (div з класом parent) за допомогою абсолютного позиціонування.

Кроки:

Застосувати позиціонування absolute до дочірнього елемента.
Обчислити значення властивостей top та left, щоб розмістити дочірній елемент по центру батьківського елемента. Батьківський елемент має ширину та висоту 220px, а дочірній елемент — ширину та висоту 80px.
Переконатися, що один з елементів має позиціонування absolute, а інший — relative, щоб встановити правильний контекст позиціонування. Інакше абсолютне позиціонування буде відносно елемента body.

index.html

index.css

Для обчислення значення властивості top використовуйте формулу: (parentHeight - childHeight) / 2.
Для обчислення значення властивості left використовуйте формулу: (parentWidth - childWidth) / 2.

index.html

index.css

Все було зрозуміло?

Дякуємо за ваш відгук!

Секція 2. Розділ 5

Запитати АІ

Запитайте про що завгодно або спробуйте одне із запропонованих запитань, щоб почати наш чат

Awesome!

Completion rate improved to 2.04

Свайпніть щоб показати меню

Завдання

Кроки:

Застосувати позиціонування absolute до дочірнього елемента.
Обчислити значення властивостей top та left, щоб розмістити дочірній елемент по центру батьківського елемента. Батьківський елемент має ширину та висоту 220px, а дочірній елемент — ширину та висоту 80px.
Переконатися, що один з елементів має позиціонування absolute, а інший — relative, щоб встановити правильний контекст позиціонування. Інакше абсолютне позиціонування буде відносно елемента body.

index.html

index.css

Для обчислення значення властивості top використовуйте формулу: (parentHeight - childHeight) / 2.
Для обчислення значення властивості left використовуйте формулу: (parentWidth - childWidth) / 2.

index.html

index.css

Все було зрозуміло?

Дякуємо за ваш відгук!

Секція 2. Розділ 5