Center elements within column horizontally

Hi there,

How can I center the element in the blue/purple column horizontally? You can see form the screenshot that I have centered the text but I would rather have the text left aligned but have all the content centered within the column. Does that make sense?

https://www.chorusfp.com/

Thanks for your help!

Hi @ollietigs,

Thanks for reaching out.

I tried with flex styling and it’s not possible since it relies on a dimension. Adding max-width to the column isn’t working either since it acts as a table cell. How about utilizing the global block? Please check this https://theme.co/apex/forum/t/global-blocks/24723

You can create that whole section (headline, sub-title, and a button) within a global block. Then on that current page, simply add the global block as an element.

Now with the global block, you can control the layout and you can achieve that. Simply inspect the section row in your global block and set its max-width to 311px and margin to 0 and auto. Like this,

But remember, you should left align your text too which are currently centered. The given procedure is to align the layout on center while it preserves the alignment of the content.

The 311px value was the widest element within that block, and that’s the headline’s width so please change it accordingly depending on your added headline. But this isn’t limited to headline, if the sub-title or button became longer, then use its width instead. Again, the widest element :slight_smile:. And yes, you’ll guest the width and do some trial and error (block element tends to have full-width so you must guest it until it matches the width you’re trying to achieve while being centered).

Thanks!

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.