Vertical align text > Marginless Columns off

Support
#1

How do I vertically center the text with the image?
I’ve created an additional css class and set it to vertical-align: middle !important. However, that only works if the row has marginless columns ON.
How do I acheive this with marginless columns OFF?

Best
Adrian

#2

Hi There,

Click on the row where you have the elements placed > Customize > Inline CSS and add:

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

Hope it helps

#3

Hey,

thanks. I should add that I am also using the class “right” on the image to flip the IMAGE - TEXT position. With your code this won’t work anymore. Is there are workaround?

Best
Adrian

#4

Hello Adrian,

Thanks for updating thread.

Can you please share website URL?

Thanks.

#5

Done in the secure note.

#6

Hi There,

Please add this custom CSS under X > Theme Options > CSS:

.align-items-center {
    -webkit-box-align: center!important;
    -ms-flex-align: center!important;
    align-items: center!important;
    display: flex !important;
    flex-direction: row-reverse;
}

After that add align-items-center CSS to the ROW contains your image & text.

Hope it helps :slight_smile:

#7

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