Centre vertically - button header text on a column

Support
#1

How do I centre this vertically

Page
https://affinityfitness.co.nz/?page_id=4299
password pass

#2

Hi,

The page provided no longer exist. To center it vertically, you can try adding the code below in your row element’s Inline CSS field

display: flex;
align-items: center;
justify-content: center;

Hope that helps

1 Like
#3

No that didnt work
Password pass
https://affinityfitness.co.nz/fitness-classes-2/

How do you do it in the new element CSS fields?

#4

Hello @VelocityWeb,

Please edit the page back in Cornerstone. Click the column. In the column settings, find the “Customize” tab and then insert this inline element css:

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

We would loved to know if this has work for you. Thank you.

#5

Ok did that and It didnt change

#6

Hi,

Kindly remove the custom CSS then try adding a class(v-align) to your row elements

Then add this in Theme Options > CSS

.v-align .x-column
    vertical-align: middle !important;
}

Hope that helps

#7

No luck - Gap size 40% is working for me

#8

Sorry top and bottom gaps 400px

#9

Hi,

Sorry, there is a typo in the code I provided.

Please change this code

.v-align .x-column
    vertical-align: middle !important;
}

to this (note: missing open curly bracket)

.v-align .x-column {
    vertical-align: middle !important;
}

You need to remove the gap elements you have added

Thanks

#10

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