help center

Search
Close this search box.
On this page

Section/Column Vertical and Horizontal Alignment

Last Update: December 21, 2023
info
Note
This article only applies if you’re building your site with a section and column layout. If you’re building your site with containers, check out What is a Flexbox Container for more information about container layout.

Adjust vertical and horizontal alignment within Sections and Columns to achieve a “stretch-to-fill” layout. This allows elements of columns with different heights to align with one another.

column alignment bottom bfly Section/Column Vertical and Horizontal Alignment 1

For each section/column, set the alignment options:

Section/Column> Layout

Vertical Align: Choose from:

  • Top
  • Middle
  • Bottom
  • Space Between – Widgets start and end at the edge of the column, with equal space between them
  • Space Around – Widgets are spaced equally, and the edges are half the size of the space between widgets.
  • Space Evenly – Widgets have equal space between, before and after them.
spaceoptions Section/Column Vertical and Horizontal Alignment 3

Horizontal Align: This extends the ability of the inline positioning and lets you horizontally align the inline widgets that are placed in the same row. Choose from:

  • Start
  • Center
  • End
  • Space Between – Same as the vertical control
  • Space Around –  Same as the vertical control
  • Space Evenly –  Same as the vertical control
spaceoptions2 Section/Column Vertical and Horizontal Alignment 5

Have more questions? We’re more than happy to assist.

Link is copied to clipboard!
On this page

Is this article helpful?

Share this article

Stuck?
Our Elementor Expert is Ready

Book a 45-min video consultation call with an Elementor expert and elevate your site!