[Resolved] Vertically Center Copy in Lightweight Grid Columns

[Beau]

I am using Lightweight Grid Columns with the latest version of GP and cannot for the life of me figure out how to make some text centered vertically in a 50% width column.

Is there any way to do this?

Thanks!
Beau

[Tom]

Vertically centering content is very difficult in CSS/HTML unless you know the exact height of what you’re centering. Is there a fixed height or is it dynamic?

[Beau]

I keep finding that out! The div would be within a 50% column within one of the sections of a regular static page, so ultimately the height would be dynamic based on the screen width. I suppose I could set the height of the div, which could change based on screen width?

[Tom]

You could try something like this: http://zerosixthree.se/vertical-align-anything-with-just-3-lines-of-css/

[Beau]

Ya I did see that thanks, but that only works with a static height for the parent element. Do you know of any way I could make the element’s height based on the height of the image in the other column?

[Tom]

I don’t believe that would be possible without using something like javascript.

[Beau]

Cool thanks Tom!

[Tom]

No problem!

[Maxwell]

Any chance of an update to LCG with flexbox?

[Tom]

Possibly, but this is a great alternative: https://en-ca.wordpress.org/plugins/gridable/

[Brian]

Tried this but it cuts off some of the text when in mobile.
I used http://zerosixthree.se/vertical-align-anything-with-just-3-lines-of-css/ but I couldn’t get it any better. Currently having the problem on https://bttestserver.com/ Could anybody help?

Kind Regards,

Brian Thompson

[David]

Hi Brian,

could you raise a new topic, it just saves previous users being copied in on responses and makes it easier for us to track.

[Brian]

ok. Thanks.

[Author]

Posts