How to Center Images in Lists on WordPress

The block editor includes a setting to insert images inside WordPress lists using the inline image option. This option however aligns the image to the left by default.

No controls are provided to align the image to the center as it’s the case with the normal image block. Some people can live with this default behavior, however, there are those of us who cannot live without centered images.

The quickest solution I have come up with is to just use some CSS to override the default style as follows:

li img {
display: block;
margin-left: auto;
margin-right: auto;
}
Advertisements

Using the CSS

To use this CSS, just add it to your Additional CSS rules inside the Customizer. Note however that the above rule will apply to all images in lists across your entire site – page and posts alike.

To apply the rule to posts only, you can customize the CSS by adding to the rule the single posts’ selector according to your theme.

For instance, for my current theme the selector for single posts is .single-post-container, and so in my case I would customize it to:

.single-post-container li img {
display: block;
margin-left: auto;
margin-right: auto;
}

You may also want the rule to apply to just a single post or page. This too is possible as we only need to add to that specific list a CSS class with which we can select it.

To do that, select the list block inside the editor and click the Advanced option in the sidebar. In the Additional CSS class(es) box, enter a class to select that list e.g. centered-images.

A screenshot showing the WordPress list block settings

After doing that, save the post and add the following rule into Additional CSS in the customizer:

.centered-images li img {
display: block;
margin-left: auto;
margin-right: auto;
}

Now any time you want to center images for a specific a list, you only have to add the custom class to it and the CSS will do the rest for you.


Author

Kelvin Muriuki is a web content developer that's passionate about keeping the internet a useful place. He is the founder and editor of Journey Bytes, a tech blog and web design agency. Feel free to connect with him regarding the content appearing on this page or on web and content development.

Leave a Reply

Feel free to share your comments or questions with me. I may not be able to respond immediately so please check later once I've approved your comment.

Your email address will not be published. Required fields are marked *