Center Alignment

These classes will vertically center content within the section, column, or module.

alignment classes

Usage

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

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

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

 

Use with

Any Section, Row, or Module

Design

Nothing to configure here.

valign-center-section

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

 

Examples

This is an example of a section vertically centering rows

valign-center-row

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

 

Vertically Centered Text Module inside a Column

Vertically Centered Text Module inside a Column

Vertically Centered Text Module inside a Column

valign-center-module

Add valign-center-module 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.