Зміст курсу
Advanced CSS Techniques
Advanced CSS Techniques
Challenge: Absolute Positioning
Task
Center the child element (div
with the class name child
) within the parent element (div
with the class name parent
) using absolute positioning.
Steps:
- Apply
absolute
positioning to the child element. - Calculate the values for the
top
andleft
properties to center the child element within the parent element. The parent element has a width and height of220px
, while the child element has a width and height of80px
. - Ensure that one element has
absolute
positioning, and the other hasrelative
positioning to establish the correct positioning context. Otherwise, the absolute positioning will be relative to thebody
element.
index
index
index
- To calculate the value for the
top
property, use the formula:(parentHeight - childHeight) / 2
. - To calculate the value for the
left
property, use the formula:(parentWidth - childWidth) / 2
.
index
index
index
Дякуємо за ваш відгук!