Giving hover div a flex issue - image not appearing

HTML & CSS
1

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:

Thanks!

2

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:

.attachedCoworker-link{
  display:flex;
  height:100%;
  justify-content:center;
  flex-direction:column;
  padding-left:5px;
  overflow:hidden;
}

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

1 Like
3

Thank you, that worked perfectly :slight_smile:

1 Like
4

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