Quick Tip: How to Center Images in a WordPress Gallery Block

👋 Ciprian on Friday, April 9, 2021 in Blog
Last modified on Friday, April 9, 2021

Learn JavaScript by example. Code snippets, how-to's and tutorials. Try now!

Here’s a quick tip for centering images in a WordPress gallery block vertically and horizontally. I used this for a client logo list (see an example below).

.gallery--vertical-sample .blocks-gallery-grid,
.gallery--vertical-sample .wp-block-gallery {
    justify-content: center;
    align-items: center;
}
.gallery--vertical-sample .blocks-gallery-grid .blocks-gallery-image,
.gallery--vertical-sample .blocks-gallery-grid .blocks-gallery-item,
.gallery--vertical-sample .wp-block-gallery .blocks-gallery-image,
.gallery--vertical-sample .wp-block-gallery .blocks-gallery-item {
    align-items: center;
}

Buy me a coffee to support my work!

👋 Added by Ciprian on Friday, April 9, 2021 in Blog. Last modified on Friday, April 9, 2021.

Leave a Reply

You have to agree to the comment policy.

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Privacy Policy