[simon qParticipant]

Hello

I wish to vertical center the text within the columns on this page.

http://pronunciation.club/phonetics-builder/worksheets/worksheet-2-1/

Cheers!

[JoaoModerator]

Hi There,

Type on the Style Box of the columns where your texts are placed:

text-align: center;

Hope it helps

Joao

[simon qParticipant]

Sorry okay I mean’t horizontally align.

Imagine text in a rectangle. I want the text to always be smack dab in the middle of the rectangle. The rectangle in this case being a column in cornerstone.

[FriechModerator]

Hi There,

You can add a Gap element on top of your text to push it a little bit below, so it will look vertically center.

You can hide the Gap element on mobile so it wont cause a gaping issue.

http://prntscr.com/byygae

Hope it helps, Cheers!

[simon qParticipant]

I found this CSS and added it to the text element and it’s achieved what I was looking for.

{
height: 150px;
line-height: 150px;
vertical-align: middle;
}

Full info here

A.) If you only have one line of text:

HTML:

<div>vertically centered text</div>
CSS:

div
{
height: 200px;
line-height: 200px; /* <– this is what you must define */
vertical-align: middle;
}

B.) If you have multiple lines of text:

HTML:

<div><span>vertically centered text</span></div>
CSS:

div
{
height: 200px;
line-height: 200px;
}

span
{
display: inline-block;
vertical-align: middle;
line-height: 14px; /* <– adjust this */
}

Demos and more in the link below
http://stackoverflow.com/questions/9249359/is-it-possible-to-vertically-align-text-within-a-div

[simon qParticipant]

and actually flexboxes, while not all browsers support, all modern browsers now do.

Flexboxes will be a game changer and I can’t wait until X-Theme starts supporting it in Cornerstone.

https://css-tricks.com/snippets/css/a-guide-to-flexbox/

[LelyModerator]

Hi Simon,

Thank you for sharing your solution.

Cheers!

[Author]

Posts