Centered Text Over Image on Hover / New to Forums

I’m kinda new to coding, and working on a new Cargo portfolio site. I am proud of myself that I was able to turn all my thumbnail images to black and white, have them turn color on hover, AND display caption text over the photo on hover as well. (*I’ve only applied this to a few thumbnail images thus far.)

What I’m having trouble with is getting that text perfectly centered on each image.

Can anyone take a look and let me know if you’ve got any suggestions? Thanks - I’m looking forward to learning more!

  • Eric


Flexbox is an efficiengt way to achieve this:

media-item .caption {
    display: flex;
    justify-content: center;
    align-items: center;
    position: absolute;
    margin: 0;
    height: 100%;
1 Like

YES - thank you! I had heard about flexbox…but was having trouble implementing it. Much apprecaited!

you’re welcome