Docs

[Buttermelts]

Hello,

I think I have a good idea of how to vertically align content within a row or column, but how can I vertically align the row itself so it is in the middle of a section? For example, I set the height of a section to 100vh and placed a row within the section. I can set images and text within the row to vertically align to the middle of the row, but how can I place the row itself into the middle of the section?

Is there any way to do this so it is dynamic no matter what size window or from which device I am viewing? I’m aware that you can use gaps to simulate this, but it’s not a robust solution. How do I accomplish this if there are multiple rows in a section so that all content is vertically aligned to the middle of a section?

[Buttermelts]

This reply has been marked as private.

[Rad]

Hi there,

Thanks for posting in.

Could be done like this,

#x-section-2 {
    min-height: 70vh;
    line-height: calc(70vh - 200px);
}

#x-section-2 > .x-container {
    line-height: normal;
    display: inline-block;
    vertical-align: middle;
}

Where 200px is the total padding of your #x-section-2’s top and bottom.

Hope this helps.

[Buttermelts]

Can you tell me how to do that with #x-section-1? Just changing #x-section-2 to #x-section-1, 70vh to 100vh, and the 200px to 90 px (total top and bottom padding of the section) doesn’t have the desired results.

[Rad]

Hi there,

Sure, please add this as well,

#x-section-1 {
    min-height: 100vh;
    line-height: calc(100vh - 90px);
}

#x-section-1 > .x-container {
    line-height: normal;
    display: inline-block;
    vertical-align: middle;
}

And make sure that margin less column is turned off.

Cheers!

[Author]

Posts