All Collections
How to Center Elements
How to Center Elements
This guide shows how to control the size and positioning of your Shogun elements.
Jill Nahajewski avatar
Written by Jill Nahajewski
Updated over a week ago

There are two common methods for responsively sizing and centering elements in the Shogun editor.

Option 1: Using Maximum Width & Auto Margins

To horizontally center a Page Builder element, we recommend combining the Maximum Width setting with "Auto" Margins.

Select the element you'd like to center. In the Dimensions style options, set a Max Width to limit its size:

Next, go to the element's Margins options. On the left & right margins, click on the "px" field next to the text input and select "auto" from the dropdown. This will center the element.

Option 2: Using Columns to Center Content

Using Columns is a quick and easy option. Simply add a 3-column element into the page, then place your content in the center column.

The Column Widths slider can then be used to adjust the size of the columns.

(Using columns alone to center does add extra elements to the page. To help keep content simple and manageable, we recommend using Option 1 when horizontally centering an element.)

Related Guides:

Did this answer your question?