Skip to main content

The gotcha of align-content with block elements

Everyone is excited about the new align-content that works with block-level elements, but pay attention when you want to center elements such as <img>, <iframe>, <canvas>, <video>, etc.

⚠️ They won't get centered ⚠️

They will look centered but in reality, they are not and this is not a bug!

Illustrating the effect of align-content on image inside block level elements: the image is not perfectly centered

Images and similar inline-level elements have that strange white space under them due to the default baseline alignment, and that space is preserved when using align-content because we align the "whole content"

So don't forget to get rid of that space using vertical-align: top

Adding vertical-align: top to the image to have a perfect centering alignment

That space may look small but it can make a difference especially if you use a big font-size.

See the Pen align-content with block elements by Temani Afif (@t_afif) on CodePen.