Streaming live at 10am (PST)

How to Overlay Image Centered within Flexbox Layout?

I need to overlay a “play” button on various video thumbnails. The 50% Absolute Positioning / Translate Up 50% trick worked great when I was using a traditional Row/Column layout.

I’ve recently moved to using a flex layout so that it is easier for me to rearrange the various thumbnails, or add a new one to the top. Using flex means a lot less copying and pasting around.

Anyway, I cannot get the play button overlay to work or center any more. I tried some relative positioning stuff, which works in Chrome/Edge but fails badly in IE.

Any help appreciated, thanks

I don’t know how exactly, but I got it working with relative layout of the overlay element, and a height of 0.

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