Streaming live at 10am (PST)

How-To: Vertical Align Middle with Columns


#1

Hi all,

can somebody explain me how to vertical align content using columns? I made a small project:

Read only:
https://preview.webflow.com/preview/columns-vertical-align-middle?preview=dbdf197e59a7f5401f6d17e0bca15a29

Preview:
http://columns-vertical-align-middle.webflow.io/

What do I need to do, in order to center the “heading”? Is it possible?


#2

Any particular reason for not using flexbox for this? You can easily achieve that effect:

https://flexbox.webflow.com/#layouts


#3

Thanks for the link! Have a lot of Layouts already using columns. If there is a solution it would be easier than building all from scratch with flexbox.


#4

You cannot equalize column heights unless you use fixed height.

Lets say that each column will have 300 px height:

1 - Give a class to your column and set it to position: relative and give it a hight of 300px

2 - Give a class to the heading inside the column and add 50% top-padding

3 - add a -50% with transforms to the heading

You then need to set the height for the text column to equalize both, but this is not the best approach since that the text might be off on smaller screens - make sure to check the tablet and mobile views to avoid that.

Flexbox would really be a better option here.

Hope this helps.


#5

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