ANOTHER vertical centering image question

The one question you probably get asked more than any other :wink:

I’m trying to centre an image vertically in a column on the latest version of Pro. This is on the page below with the NO1 Picture frame (in the white ‘then we asked why’ section) and the TV image in the bottom orange section.

http://cpcorpwp.uksouth.cloudapp.azure.com

I’ve tried a million and one options from various previous threads and have only managed to get it working using the css below and the style vertical-align: middle; on the column that contains the image and then applying the classes below to the row and the column. Interestingly all the solutions mention this will ONLY work with marginless columns… where as it only works for me if marginless columns are switch OFF (which is better for me anyway).

.flex-parent {
display: flex;
}

.flex-child {
display: flex;
align-items: center;
justify-content: center;
}

This works fine on desktop, but I then need to duplicate these two sections and remove the classes above so that the columns stack normally on mobile so we have seperate one’s for desktop and mobile.

This all just seems like a massively complicated way to simply centre an image in a column. Are there any other ways to do this? This is all using code and repsonses from several years ago so I was just hoping there might be a new more simple solution. As a ton of other themes simply let you centre an image and with how advanced and amazing X and Pro is in every other way it baffles me that there is no simple solution than this is centering an image in a container is the standard way of using images for 99.9% of designs.

So any help or handy methods to do this other than the above would be great.

Thanks again.

Hi Mark,

Thank you for reaching out to us. Currently you can vertically align any element by turning on the Marginless Columns (see the instructions here: https://theme.co/apex/forum/t/vertical-align-center/52464/2) but I see you don’t prefer this method. You’re correct vertical-align: middle; only works when Marginless Columns are turned on as it changes the layout from block to table and vertical-align property only applies to:

inline-level and ‘table-cell’ elements

See here https://www.w3.org/TR/CSS21/visudet.html#propdef-vertical-align

There are multiple ways to vertically center an element, simplest is the Flexbox method that you used. To make sure it is not applied in mobile screens, you can simply use CSS media query and update your code with the following one:

@media screen and (min-width: 768px) {
    .flex-parent {
        display: flex;
        align-items: center;
    }
}

The above CSS rule will only be applied to the desktop screens and this way you don’t have to duplicate any section for the mobile screens as the column will stack up normally.

In this method, you only have to give a class flex-parent to your Row and that’s it, the above code will take care of centering the elements within that row. So you don’t need an extra class flex-child and you can remove this code as well:

.flex-child {
display: flex;
align-items: center;
justify-content: center;
}

However there are plenty of other ways to center an element, you can checkout here https://css-tricks.com/centering-css-complete-guide/ however the easiest of all is using a Flexbox method https://css-tricks.com/snippets/css/a-guide-to-flexbox/

Here are some related links for further reading, this could help you in finding and implementing some CSS fixes:

Hope this helps!

1 Like

Hi Nabeel,

Firstly thanks for the super quick reply, and a really detailed one at that!

The simply flex.parent on a row works perfectly and massively simplifies things so a massive thank you for that!

One thing I noticed is when viewing on mobile the image is no longer HORIZONTALLY centred, is there a quick way to do that in the same css? I added text-align: center; but that doesn’t seem to work. I’m new to messing with CSS so apologies if this is an obvious question :wink:

Thanks again.

Hi @PKFCooperParry,

Please change the text align of column contains image to center:

Hope it helps :slight_smile:

Thanks Thai, that wasn’t working on the column I was using as I had another set of css on the image :wink:

All good now thanks again. Cracking support as always thanks!

You’re most welcome Mark! :slight_smile:

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