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

Store Design
,
1

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.

2 Likes
2

Hi @Kitblaketrouser ,

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

made4Uo_2-1682614204800.png
made4Uo_2-1682614204800.png1244×846 50.8 KB

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

made4Uo_1-1682614171371.png
made4Uo_1-1682614171371.png649×121 8.38 KB

3

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

1 Like
4

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.

5

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

Thanks!

6

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.

7

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

1 Like
8

Hi there,

We are experiencing the same problem. I keep aligning to the centre and the text does but not the images. I’ve tried everything including adding code! Anything else you could suggest?

Where should I input this bit of code- <img style= “position:relative; left: 50%; transform:translateX(-50%);” ?

Thank you,
Eloise

1 Like