How can I center-align images in my blog posts?

[Kitblaketrouser]

Hi there

We have issues with centre-aligning images on our blog posts.

Despite centre-aligning them on the backend directly on each blog post, they often have issues and aligned to the left.

I have added this bit of code to theme.css.liquid, but it didn't change anything.

.article__grid-image-container,
figure.image {
text-align: center;

Our store is Kitblake.com

Thanks for your help.

[made4Uo]

Hi @Kitblaketrouser,

I am assuming that you are using the feature that Shopify has in aligning images. See image below

To use the feature. 

1. From you Admin page, go to Online store > Blog post
2. Go to the blog you want to edit.
3. Inside the content, click the image you want to align. This should highlight the image in blue

4. Click the "Edit image icon", see image below

[Kitblaketrouser]

Thanks very much, I have done this for all images but it still doesn't work, they're aligned on the left.

[adsrole]

Hello @Kitblaketrouser 

Here is the code for you.

.article__grid-image-container,
figure.image {
position:relative;
left: 50%;
transform:translateX(-50%);
}

Also, I am including the image of how it will look once implemented.

[Kitblaketrouser]

Thanks @adsrole can you please confirm in what part of the theme code should I add this code?

Thanks!

[adsrole]

Hello @Kitblaketrouser 

<img style= "position:relative; left: 50%; transform:translateX(-50%);"

You can use it like this or share the class name to help you further.

[Kitblaketrouser]

Thanks Austin, but it doesn't seem to work, weirdly.