Skip to main content
All CollectionsFAQContent
How to Center Elements
How to Center Elements

This guide shows how to control the size and positioning of your Shogun elements.

Updated over a year ago


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

Centering with Maximum Width & Auto Margins

This is Shogun's recommended method for centering elements in a lightweight approach.

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

1. Set a Maximum Width

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

The location of the maximum width setting in Shogun Page Builder

2. Set Side Margins to Auto

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

Using Columns to Center Content

Using Columns is an alternate method way to center content. To do this, 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.

Note: Using columns to center does add extra elements to the page. To help keep content simple and manageable, we recommend using the Max Width and Auto Margins approach when horizontally centering an element.

Related Guides:

Did this answer your question?