# Vertical Alignments

# What makes the SpaceFramework special is the vertical alignment of your elements.

This can be done by using classes such as .align-baseline .align-capline and .align-median.

# Baseline alignment

Classname: .align-baseline

By applying the css class .align-baseline on an container element you can align all (defined) children by its baseline on the space-unit grid. This includes headings, images, tables etc.

xLarge

Nullam quis risus eget urna mollis ornare vel eu leo. Sed posuere consectetur est at lobortis. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam porta sem malesuada magna mollis euismod.

# Capline alignment

Classname: .align-capline

By applying the css class .align-capline on an container element you can align all (defined) children by its capline on the space-unit grid. This includes headings, images, tables etc.

xLarge

# Median alignement

Classname: .align-median

By applying the css class .align-median on an container element you can align all (defined) children by its median on the space-unit grid. You should probably apply this only on headings.

xLarge

# Cross Alignment

By using the .align-baseline in combination with the .shift utility class you can align multiple columns containing different content with each other.

# Reset Alignment

Classname: .align-reset

Use .align-reset if you want to undo the .align-baseline, .align-capline and .align-median set on a parent container.

← Text Presets Self Classes →