The one question you probably get asked more than any other
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.