Vertical Alignment

This class will vertically center content within the section, column, or module.

alignment classes

  • valign-center
  • valign-bottom
  • valign-space-between
  • valign-space-around
  • valign-space-evenly

Usage

Add one of the classes above to the Section, Row, or Module Settings > Advanced tab > CSS ID & Classes > CSS Class.

Use with

Any Section, Row, or Module

Design

Nothing to configure here.

Vertical Alignment in Sections

Add one of the classes above to the Section Settings > Advanced tab > CSS ID & Classes > CSS Class.

Examples

This is an example of a section vertically centering rows

Vertical Alignment in Rows

Add one of the classes above to the Row Settings > Advanced tab > CSS ID & Classes > CSS Class.

valign-bottom

valign-bottom

valign-center

valign-center

valign-space-between

valign-space-between

valign-space-around

valign-space-around

valign-space-around

valign-space-evenly

valign-space-evenly

valign-space-evenly

valign-center in modules

Add valign-center to the  Module Settings > Advanced tab > CSS ID & Classes > CSS Class.

Lorem ipsum dolor

This blurb’s title and text is vertically centered inside the whole blurb container. It’s also recommended to set a min-height:300px; on the blurb, or something similar to that.

Lorem ipsum dolor

This blurb’s title and text is vertically centered inside the whole blurb container. It’s also recommended to set a min-height:300px; on the blurb, or something similar to that.

Lorem ipsum dolor

This blurb’s title and text is vertically centered inside the whole blurb container. It’s also recommended to set a min-height:300px; on the blurb, or something similar to that.