ImagesLesson 85Free preview
Center Images
This lesson is part of How To · All levels
Summary
Center images discuss several ways of centering images, both horizontally and vertically. For a block image, the left-right margin is a simple classical method. Flexboxes or grids are more flexible when images need to be centered within an area of a certain height.
Key points
- Display: block with left-margin: auto and right-margin: auto centered on a horizontal image.
- Text-align: center on the parent centering the image inline.
- Flexbox uses justify-content and align-items for two-way centering.
- Grid can use place-items: center.
- Absolute centralization requires top, left, and transform translate.
Full lesson
Code examples and quizzes
Full lessons, code examples, and quizzes are available to subscribers. 5 questions.