Vertical-align content of a column

[antoine_generau]

Hello,

There is something I did not quite understand in order to vertical-align some content. I’ve got some content of a column that I’d like to vertical-align within a row.

I’ve got this code in the customiser .vam { vertical-align: middle !important; }. I tried to apply the class vam to the column but it’s not working. How should I do it?

Thanks,
Antoine

[mldarshana]

Hi Antoine,

Thanks for writing in! There could be many ways to achieve this. So I will just mention couple of options. The easiest method is to use Gap element in Cornerstone and place it above and below your content, so that it will create an equal gap according to what you have set. You can also check shortocde version of Gap element from here (http://demo.theme.co/integrity-1/shortcodes/gap/).

Then other method is by using custom CSS. First place your element in your Column. In my example, I have placed a Text element.

Then go to your Column -> Customize -> Element CSS area and add the following CSS rule.

$el {
    height: 50vh;
    display: flex;
    align-items: center;
}

Then it should display as follows. You can then change the height according to your requirement.

Hope that helps.

[antoine_generau]

Thank you!

[thai]

You’re welcome.