CSS vertical alignment: Best practices and examples
Best practices for CSS vertical alignment
CSS Flexbox
- Works with: Flex containers
- Key advantages: Flexible, responsive, minimal extra markup
- Browser support: All modern browsers
Example 1:
Aligning items vertically with justify-content and align-items
Example 2:
Aligning items within a Flex container with different alignments
Example 3:
Aligning Flex items vertically with align-self
Example 4:
Aligning Flex items vertically with align-content
Example 5:
Aligning Flex items vertically using pseudo-elements
CSS Grid
- Works with: Grid containers
- Key advantages: Precise placement, single-line centering with
grid-column - Browser support: All modern browsers
Example 1:
Aligning Grid items vertically with align-self and justify-self
Example 2:
Aligning Grid items vertically with align-self on a grid item
Example 3:
Aligning Grid items vertically with grid-row to specify vertical position
Example 4:
Aligning Grid items vertically using pseudo-elements within the grid
Absolute positioning
- Works with: Any positioned parent
- Key advantages: Works without Flex or Grid, wide browser compatibility
Inline & table-based
- Works with: Inline/text elements, tables
- Key advantages: Works with inline and text elements, wide browser compatibility
Example 1:
Aligning elements vertically using line-height and vertical-align
Create a Markdown format for the table of contents with summarized information for each method.