We’re with you. JoomShaper is offering a 20% Discount on all plans due to the impact of COVID-19.

Support Offline : Mon - Fri / 10am - 6pm (GMT +6)

Your Time: Our Time:

Vertical alignment of columns

Featured Lock Resolved Issue

Searched the forum but couldnt find a topic on this. Is there a way to vertically align columns or Add-ons in page builder? By default, the column content is centered, but would like to see if I can get the column content to vertically align with each other. Thanks

7 Answers


More than a month ago #Permalink
If I understand the question correctly, the discussion went the wrong way.
The vertical-align property is only used for inline elements or table cells. Columns in SP PB are block bootstrap elements and you can not apply the vertical-align property to them.

By default, the content inside the columns is aligned to the top. The columns are always of the same height, regardless of the content in them. The height is determined by the larger content.
If you want to align the columns and addons, that are inside the columns, vertically, you should click the middle align button in the section settings.
In order to align the blocks like that on another, you should perform the following actions:
Add a class or ID to the section.
Find the container with the code inspector, which centers the blocks in the middle, disable the original align-items property,
copy its selector and add it after your class. Then you can use the align-items property and use one of its possible values.
The final code from my example looks like this:

.myClassSection .sppb-align-center {
align-items: end !important;

Paul Frankowski - Staff

More than a month ago #Permalink
maybe you have to use: https://www.w3schools.com/cssref/pr_pos_vertical-align.asp
for selected class

Mike Lawson

More than a month ago #Permalink

I think this is the right path, but I havent been able to find the right snippet. This is what I tried in custom CSS

#sppb-column {
vertical-align: text-top !important;

Doesnt work, any alternatives? Thanks

Paul Frankowski - Staff

More than a month ago #Permalink
You have to talk with Front-end developer.
Sorry, I made mistake, The vertical-align CSS property specifies the vertical alignment of an inline or table-cell box ONLY, not columns blocks.

Read about: https://developer.mozilla.org/en-US/docs/Web/CSS/align-items

Mike Lawson

More than a month ago #Permalink
Pavel & Frank

Thanks for your input, very helpful (and yes, it worked). Im sure this thread will come in handy for others as well.

Paul Frankowski - Staff

More than a month ago #Permalink
I asked to add this option into row/columns settings - it should be easy to implement.


There are no replies made for this post yet.
Be one of the first to reply to this post!




Community Users


Don’t miss any updates of our new templates and extensions and all the astonishing offers we bring for you.
We never spam

Joomla! ® name is used under a limited license from Open Source Matters in the United States and other countries. JoomShaper.com is not affiliated with or endorsed by Open Source Matters or the Joomla! Project.

Connect Us