Giving hover div a flex issue - image not appearing

Hi there,

I have a div that shows a user profile image and then some text when hovering on it.

This works fine, but I am trying to have the text in the white centered vertically so if there is only 1 line of text or 2 lines of text, they both appear centered.

I have tried added a flex and align-items: center, but this then makes the image disappear.

Can anyone suggest how to fix this?

This is what I have so far:


I would have designed the whole thing as a flexbox and do away with the floats and then alignment is straight forward.

However you should be able to get away with it by adding this:


Add that code at the end of the CSS for testing and once happy then integrate it properly.

1 Like

Thank you, that worked perfectly :slight_smile:

1 Like

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