Centering images, text boxes, and more (vertically/horizontally)

[intercomputer]

I’ve searched the forums and all I can find are CSS implementations to do as the post title says. For centering images horizontally or vertically (or both) in a row or column, it seems there is no Inspector function to accomplish this.

I have several items that I need to center and make look correct in responsive modes. See the linked page in the secure note. I’ll add.

For example:

1. The colored product logos are centered using padding or margins and look fine on desktop, but on other responsive sizes the padding and margins made the images very unbalanced.
2. The profile image in the quote is not able to be resized larger than 300px. Why is the Inspector limiting me here?
3. The hero row’s text boxes and button aren’t able to be centered vertically and horizontally. For some reason X is pushing them to a bottom-right positioning.

How can I accomplish this without CSS? If it is only possible with CSS, here’s to a feature request. Also please link to any tutorial or KB article that is relevant, because I couldn’t find one. Thanks.

[ruenel]

Hello @intercomputer,

Thanks for writing in!

To resolve your issue, please do this:

• Please edit each of your image elements and
  – Set the width to auto
  – The max width needs to be 100%
  – Remove the left and right padding

• And then in each column settings, please set it to align center.

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

[intercomputer]

Thanks, @RueNel!

This worked for the colored product images. I didn’t know you could add in auto and 100% in the text boxes next to the sliders. I also didn’t know the text align function applies to images as well as text. I’ve read much of the documentation for the theme, but didn’t catch that. Is there an in-depth KB article on the Inspector and all the options and hidden features it has?

For the hero image, I’m still not able to get the text boxes and buttons to appear centered there even with your recommendations. They’re showing off-canvas even for me at the bottom-right of the hero image area.

[ruenel]

Hello @intercomputer,

We have a dedicated article for each of the elements in our knowledge base. Please check “Elements” section here: https://theme.co/apex/forum/t/knowledge-base-overview/287

For your hero image, I do not see any text or button. And that is because you have added a very huge amount of padding in your column. In your first section, please remove that padding. Set it to zero. And then in the row settings, please enable the column container or inner container.

Hope this make sense.

[intercomputer]

Thanks for linking that KB article. I skimmed through those before starting and my honest feedback is that all of those articles need some more detail. For example, your tip to set the width to auto and max width to 100% is not in there. For people who don’t have a lot of CMS experience, it’s important to explain what these are.

As for our page, I’m making headway with the things you are suggesting. I still can’t figure out how to set the “Insured 100%” image further down the page to align center horizontally without making all the text also centered, which I don’t want. I want the text left-aligned but the image centered. Any ideas?

[friech]

Hi There,

Please set your columns to text-align: center; as you know this will center everything on that column including the text elements.

Now inspect each of the text elements and set it to text-align: left;, this will make your text align left while keeping the image and button center.

Hope it helps,
Cheers!

[intercomputer]

Thanks, this worked. I’ve got a couple more questions about image issues I’m having, but I’ll post it on another thread because it’s a different topic.

[paul.r]

You’re welcome!