Vertical-align: middle! important not working

[TristanP]

Hi there!

I have a single column where

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

does not work?? I am trying to vertically align an image.

[TristanP]

Please do not share details of the site on the forum

[friech]

Hi @Tristanarkesteijn,

Thank you for writing in, vertical-align: middle !important; will not work on that ROW, because that ROW is set to display: flex;

Please have this instead for that Column.

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

Guide to Flexbox

Hope it helps,
Cheers!

[TristanP]

@friech

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

Unfortunately, that does not work either?

[friech]

Hi Tristan,

Would you mind pointing us the page in question? this page (secure note) has different content now than the last time I’d checked it.

Please provide us the URL of the page where we can see the figures on your screenshot.

Thanks,

[TristanP]

It’s the same page.

You probably checked it while i was working on it. You should be able to see it now.

PS: can you please remove the URL from the previous post?

[christian]

Thanks for the new credentials. The page Friech posted still has different content than the screenshot you’ve posted. Please clarify.

Thanks.

[TristanP]

Ah yes, sorry. I was still working on it.

It should show now. I will leave the page alone now.

[thai]

Hi Tristan,

I’ve changed the element CSS of column to this:

$el.x-column {
     align-self: center;
}

Then everything looks good now:

Cheers!

[TristanP]

Thanks, appreciate it!
I wasn’t aware of this function.

[rad]

You’re most welcome!