Vertically centering paragraph in a section?

Hi there,

gridable uses flex, so we can take advantage of that with this CSS:

.gridable--col {
    align-self: center;
}

All columns will vertically aligned to the centre.

If you wanted to be selective over which sections you apply it to, then you can use a custom class e.g col-vert-centre and add that as a Custom Class in the GP Sections then this CSS:

.col-vert-centre .gridable--col {
    align-self: center;
}

Hi,

I want to achieve the same thing as above. I have added the css as suggested, but it's not having the desired affect on my section. I am also using lightweight grids. Will this negate the gridable functionality? Should I be using the gridable plugin instead for this to work?

Here's my html:

[lgc_column grid="50" tablet_grid="50" mobile_grid="100"]

<h6>Resolving disputes</h6>
<h2>Finding a solicitor who can help</h2>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean pellentesque placerat enim nec porttitor. Donec mollis diam rhoncus tincidunt ultrices. In interdum dapibus risus, quis luctus urna rhoncus ac. Integer ornare eu dolor sit amet accumsan.

Find a solicitor
[/lgc_column]

[lgc_column grid="50" tablet_grid="50" mobile_grid="100" last="true"]

[/lgc_column]

Thanks for your help,
Helen

LGC doesn't use flexbox right now. Can you link me to the page?

Hi Tom,

This is the page:

https://familycourts.idas.org.uk

Thanks for your help.

Helen

Hi there,

you can try this:

.inside-grid-column {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    height: 100%;
}

Hi,

Thank you very much, this worked.

Best wishes,
Helen

You're welcome