How can I centre inline elements?

I’ve checked this support thread - https://theme.co/apex/forum/t/pro-making-elements-inline/35837 - but it doesn’t quite do what I need. Now I have my text and button inline, I want the content centered rather than left aligned.

How can I do that?

Hello Loren,

Thanks for writing in!

Where is your text and button located? Is it in the custom header or in the section at the content area? Please provide us the url of the page in question so that we can take a closer look. Meanwhile, if the text and button is in the custom header, please make sure that your self flex and flex layout is set like the image below:

We would loved to know if this has work for you. Thank you.

It’s in a regular section on a page. The homepage. Here > www.thewebsiteschool.co.uk.

It’s not live though.

Hey Loren,

​To assist you better with this issue, would you mind providing us the url of your site with login credentials so we can take a closer look? This is to ensure that we can provide you with a tailored answer to your situation.

To do this, you can create a secure note with the following info:
– Link to your site
– WordPress Admin username / password

To know how to create a secure note, please check this out: https://theme.co/apex/forum/t/how-to-get-support/288

Thank you.

Hi,
I’ll set you up with a login.
Thanks.

Hi Loren,

I’ve changed the Container > Flex Layout > Horizontal option to Center then your logo and navigation are center right now:

Cheers!

Argh! No!

I was happy with the header. The problem was a regular section on the homepage! See the screenshot below.
I have a line of text and then a button next to it. I have both inline but I’d like both elements entered.

Hi Loren,

Upon checking, I see that your element is already centered.

You can also assign the class center-text into your Column that resides your elements, so that your elements will be centered.

Thanks!

Hi,
It’s not centred. I just placed it in a middle column to give an illusion but I really want them centred within the column.

The 'center-text class doesn’t seem to work.

Hi Loren,

It’s centered, please note the calculation also includes the button since they are in one line. Try removing the button and it will be centered, just the text.

Or, if you wish to make them centered in a full-width column then it’s not going to work since each element has float styling (left). It will always stay on left.

For that, you’ll have to use a different approach using inner container.

  1. Make sure the columns are set back to 1 column making it full-width
  2. Toggle off the margin-less column option
  3. Inspect the row and toggle off the inner container with this setting

And that’s it :slight_smile:

The 700px is the total width of the text and button including spacing in between. And the container automatically center its 700px dimension.

Thanks

Ah, that’s better. I’ll just need to add a different version for mobile. (and fix my header!).

Thanks.

We are delighted to assist you with this.

Cheers!

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