Vertically center text custom class or option

Hello, i have some text that i want to center vertically. there is a picture on the column on the right that is bigger than the text. is there an option to vertically center it? (in the column are 3 elements: a headline, gap and the text, they all need to be centered). maybe i can use a code and add a custom class to the column? that way it is user friendly because i need to do it on future pages too.
Greetings

Thibaud Desutter

Hi Thibaud,

Thanks for writing in!

Yes the best way is to give a class name and write the CSS to Theme Option -> CSS so that you can use it in multiple places.

The CSS should look like this.

.customclass {
vertical-align: middle !important;
}

Hope this helps!

If you would like to learn CSS, I am sharing few resources that you take a look to get started with CSS and an interesting tool that you can use to speed up the development process.

I recommend you to watch following video that will help you to get started with CSS.

https://www.youtube.com/watch?v=MFR4WXiLzpc

Sometimes it can get a bit difficult to find out the right selector to be able to write the required CSS codes. A handy tool that can help you in this is Google Chrome dev tools. I am sharing the resource that you can refer to get started with dev tools.

https://developers.google.com/web/tools/chrome-devtools/css/

https://developers.google.com/web/tools/chrome-devtools/

https://www.youtube.com/watch?v=tP_kXBJWPhQ&t=200s

Thanks.

i Added the code to my global CSS as you said, but it didn’t work. I chose tha class .verticaalcentreren and typed it in to the class field of my column, but the column still didn’t center to the column next to it.

Hi There,

Is the website under Secure Note you’re working on it? I couldn’t find the page URL contains the column you added the verticaalcentreren class.

Could you please provide us with that URL?

Thank you.

Hello, it works on this link: http://vhwp.vhcarsystems.be/onderhoudsproducten/
but not on this link: http://vhwp.vhcarsystems.be/radio-navigatie/

Hi There,

I did see the text is vertical center right now:

Maybe because of the top & bottom padding. Instead of adding the top & bottom padding to your columns, please add the padding to section.

Let us know how it goes!

i figured it out, thanks :wink:

Glad you’ve figured it out.

Cheers!

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.