Vertical-align: Middle Not Working Correctly
Chris Nichols
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.
Emmanuel
Accepted AnswerI 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 !
Mehtaz Afsana Borsha
Accepted AnswerHi
Thanks for contacting us. Could you please give me a screenshot of your issue?
-Regards.
Chris Nichols
Accepted AnswerThanks 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
Accepted AnswerI 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
Accepted AnswerHi
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
Accepted AnswerThanks, 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.
Chris Nichols
Accepted AnswerThanks Emmanuel, You fixed my problem, have a great day.