Vertical align text

[logoglo]

Hi there, check out http://eapay.wpengine.com/

See the underlined headings. Im trying to align them vertically in their column, I have this css added to the columns:

vertical-align: middle;

It is not working, what can I do?

(the ABOUT US heading, I have “padding: 80px 0;” css added, but this creates huge spaces on mobiles, especially on the “BOARD” heading)

Thanks.

[nabeel]

Hey @logoglo,

Thank you for reaching out to us. To vertically align any element, simply enable the Marginless Columns. First go to the Row settings of your section (see screenshot)

Then enable the Marginless Columns option (see screenshot)

Then in each of the columns, add the following CSS in the Element CSS area (see screenshot)

$el {
  vertical-align: middle !important;
}

You’ll find the Element CSS field under Columns’s Customize tab (see screenshot)

Let us know how this goes!

[logoglo]

OK, but I dont want the other columns in the row to be marginless…

[nabeel]

Hi again,

vertical-align: middle; will only work if you enable the Marginless Columns. There are other ways to vertically align an element, I’d suggest you to please follow this guide https://css-tricks.com/centering-css-complete-guide/

Hope this helps!

[logoglo]

Hmm, like I said, i already tried adding css, using the padding method as per your link, it works, but on a mobile, the spaces are huge…

[rad]

Hi @logoglo,

Sorry for the confusion, we’re only explaining why vertical-align: middle isn’t working. It’s only applicable for table base layout like the margin-less. It’s the only way to make it work. Else, you will have to use flex styling and more complex, please check this https://philipwalton.github.io/solved-by-flexbox/demos/vertical-centering/.

Please try it, example

$el {
  display: flex;
  align-items: center;
  justify-content: center;
}

But, it would affect the columns layout since it’s meant as columns and not flex container.

Thanks!

[logoglo]

Thanks, I tried that, but it didnt work wither…there must be a way to do this…it works with padding, but then on the mobile it doesnt look good. Anyway I can use marginless columns, but then add margins using css?

[logoglo]

I did marginless columns, and added padding to the right 2 columns, seamed to have worked.

[friech]

Hi @logoglo,

We can do a padding reset on mobile, to do this, add the custom CSS below to Theme Options > CSS

@media (max-width: 767px) {
	.mobile-padding-reset {
		padding-top: 0 !important;
		padding-right: 0 !important;
		padding-left: 0 !important;
		padding-bottom: 0 !important;
	}
}

Then apply the mobile-padding-reset to all your headline (or any element) that you want to reset the padding on mobile.

e.g.
`

JOIN

`

Did you just start building that site? I suggest to build your pages in Cornerstone moving forward, so you don’t need to do an inline styling, its the least efficient and least maintainable method on styling an element.

Cornerstone / Content Builder - Introduction

Thanks,

[logoglo]

Thanks for your help.

[ruenel]

You are most welcome!