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 Page Builder 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:
2. Set Side Margins to Auto
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.
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: