Archived topic
Vertically Center Copy in Lightweight Grid Columns
12 replies · Started by Beau on June 1, 2017
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
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?
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?
You could try something like this: http://zerosixthree.se/vertical-align-anything-with-just-3-lines-of-css/
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?
I don't believe that would be possible without using something like javascript.
Cool thanks Tom!
No problem!
Any chance of an update to LCG with flexbox?
Possibly, but this is a great alternative: https://en-ca.wordpress.org/plugins/gridable/
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
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.
ok. Thanks.
