How To Center Content in Avada
How To Center Content Vertically
One of the options in the Column Element is the ‘Center Content’ option. This option allows you to center your content vertically. This only works when the parent Container the Column is in, has the ‘Set Columns To Equal Heights’ option set to Yes. To learn more about how to center your content, continue reading below.
Step 1 – Insert a Container into the page and select your desired column layout. You must set the Container’s ‘Set Columns To Equal Height’ option to Yes.
Step 2 – Edit the column by clicking the ‘Column Settings’ icon on the left corner.
Step 3 – Locate the ‘Center Content’ option and set it to Yes. Once done, click ‘Save’.
Step 4 – Repeat steps 2 – 3 for all the columns where you’d like your content to be vertically centered.
How To Center Content Horizontally
Centering content horizontally will depend largely on the content. Many elements are designed to fill the containing column and so will be naturally centered on the page, others natually follow the normal text flow, like the Checklist and Toggles elements, and yet others have an alignment option for you to center the element or the content in the containing column. This includes Elements such as Alert, Image, Button, People, Title, Video, Vimeo, & YouTube. And for text content, you can use the alignment options in the visual or inline editor.
Using CSS To Center Content Horizontally
For that rare situation where there are no builder or element options to align the content as you wish, you can always use custom CSS. It’s impossible to cover every situation here, but here are a few common exampes of CSS to center content.
There are also many tutorials on the web for learning how to center things with CSS. A few places to start are: