vertical-align: middle not working correctly - Forum | JoomShaper
Solved SP Page Builder

vertical-align: middle not working correctly

Asked by Chris Nichols 3 years ago Last activity 3 years ago

I've updated from 4.08 to 4.09. I'm using the vertical align switch in the column settings, which worked in 4.08, but now doesn't in 4.09. However, it does work as expected when the page is in edit mode. When I use "inspect" in Chrome, vertical-align: middle; is showing as being active for the element, but something appears to be overriding it.

For example, on the page linked below, the sponsors have provided all different logo sizes, to me, having them all the same width, but vertically centred in their column is better visually. Vertical-align: middle is set in all cases in the column's settings. In the Event Partners section at the top of the page, I'm using padding to manually try and centre the logos relative to each other.

https://tomquilty.com.au/index.php/sponsorship

Accepted answer

Marked as the solution
Emmanuel

I have the same issue with vertical-align since last update 4.0.9.
The class 'sppb-align-items-center' seems no more to be correctly set (this new issue doesn't concern only images).
I temporarily just added this to custom css :

.sppb-align-items-center {align-self: center;}

The columns content will be correctly centered.
Have a nice day !

7 more replies

Mehtaz Afsana Borsha Staff

Hi

Thanks for contacting us. Could you please give me a screenshot of your issue?

-Regards.

Chris Nichols Asked this

Thanks Mehtaz,
Screenshot 1 is in edit mode, you can see the logos are aligining as expected.

Screenshot 2 is in normal public view mode, I've refreshed my browser and have viewed it in incognito mode to make sure the CSS is up to date, and it does not change.

Chris Nichols Asked this

I should add, it worked as expected in the first release of 4.0.8 that broke the Images Addon, and the problem started when I reinstalled 4.0.8 after the fix was added. I'm now using 4.0.9 and the problem is still there.

Mehtaz Afsana Borsha Staff

Hi

Use this custom CSS

img.sppb-img-responsive {
    height: 215px !important;
}

Path towards custom CSS: Extensions>Templates>Styles> Click on your current default template name then choose Template Options. Then find custom CSS within the custom code.

Chris Nichols Asked this

Thanks, but won't that just make all of the logos the same height? I'm trying to get vertical-align:middle to work as it should. They are aligned as I want them in edit mode, but won't align on the live public site.

Emmanuel

you're welcome !

Log in to reply.