Guide: How to Vertically and Horizontally Align Elements

Last Updated: Oct 05, 2018
This guide explains how to vertically and horizontally center elements within a section in Semplice.

Anytime you are looking to change the alignment of options within a section, you will need to click into the Section Options. By default, Vertical Align will be set to Stretch and Justify will be set to Left.

Vertical Align changes how elements align to one another vertically.
  • Stretch: Will have each element stretch to the height of the tallest element in the row
  • Align Top: Elements will top align
  • Align Bottom: Elements will bottom align
  • Align Center: Elements will center align


Justify changes how elements in a section are spaced out horizontally. This also affects how elements stretch when changing an element's column width.

  • Align Left: Elements will align left. When changing column widths, an element's left side will stay fixed
  • Align Right: Elements will align right. When changing column widths, an element's right side will stay fixed.
  • Align Center: Elements will align center. When changing column widths, elements will stretch from both sides.
  • Space Between: Elements will stick to the outer edges of the grid. When changing column widths, elements will stretch towards the inside of the grid.
  • Space Around: Elements will center align with extra space on the edges and between elements. When changing column widths, elements will stretch towards the outside of the grid.
17c96688a1a336f6040dd1b6149c3fa8@semplicelabs.desk-mail.com
http://assets3.desk.com/
false
desk
Loading
seconds ago
a minute ago
minutes ago
an hour ago
hours ago
a day ago
days ago
about
false
Invalid characters found
/customer/en/portal/articles/autocomplete