how to vertical align text?

Special forum to share and discuss skins for Pano2VR and Object2VR
Post Reply
Posts: 94
Joined: Wed May 20, 2020 10:38 am

Mon Aug 03, 2020 11:48 am

i'm struggling with CSS and such to get some text vertically aligned.
I have a container of 100% height, and 30% from the bottom in have a button.
in the (vertical) center of the top 70% i want to align text (from varying length). so no matter if it is 1 line or 8 lines, the center of the visible text should always be at 35% from the top (or 65% from bottom). i didn't succeed yet with any css or box sizes , put text size on automatic or not.... should be simple ...
advice appreciated!
User avatar
Posts: 10748
Joined: Thu Jan 10, 2008 3:16 pm
Location: Layer de la Haye, Essex UK

Mon Aug 03, 2020 6:18 pm

Hi david,
If you have a fixed size text box, select Word Wrap but not Auto Size, then you can use this in the CSS Styles Inner Element of the text box.

Code: Select all

display: flex;
justify-content: center; /* align horizontal */
align-items: center; /* align vertical */
I have not tested on all browsers but on my Mac Book Safari, Firefox and Chrome work OK.
Screenshot 2020-08-03 at 17.18.00.png
Screenshot 2020-08-03 at 17.18.00.png (44.49 KiB) Viewed 247 times
Garden Gnome Software Support
If you send an e-mail to support please send a link to the forum post for reference.
Posts: 94
Joined: Wed May 20, 2020 10:38 am

Tue Aug 04, 2020 3:15 am

thanks for your reply!
indeed it works, although i was hoping for some way where all sizes could stay relative. but i'll just settle for this solution and fix the text box height.

// as a side note, when using this code, each "<p>" tag becomes a new column..! can mess up lay-out. so best to change those to "<br>" which stay normal.
Post Reply