How can I center images in my blog post while keeping text left-aligned?

Store Design
1

Hi!

I have been trying to add Images to my blog post, and the main image I inserted with a code I found on the forum:

{% if article.image %}
{% capture img_id %}ArticleImage-{{ article.image.id }}{% endcapture %}
{% capture img_wrapper_id %}ArticleImageWrapper-{{ article.image.id }}{% endcapture %}
{%- assign img_url = article.image | img_url: ‘1x1’ | replace: ‘1x1.', '{width}x.’ -%}

{{ article | img_url: '345x345', scale: 2 | img_tag: article.title, 'article__grid-image' }}
{% endif %} {{ article.content }}

Now I am looking for a way to center the image, but I cannot find a way to do it!

Ideally I would like to have the whole article, images and text more centered, but the text still aligned to the left.. Can anyone help me out with this?

This is my blog post: https://consciousgoods.nl/blogs/news/about-conscious-goods

Thanks in advance!

Godiva

1 Like
2

Hey @Godiva ,

Add the following to your theme.scss.liquid file:

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

This will center all images in your blog posts.

1 Like
3

Hello, @Godiva

  1. Go to Online Store->Theme->Edit code
  2. Asset->/theme.scss.liquid->paste below code at the bottom of the file.
.article__grid-image-container {
    text-align: center;
}
1 Like
4

Hi Thanks for your quick reply!

I added the code to the theme.liquid but it hasn’t changed anything..

Does it have anything to do with the code I entered for the main image? It’s so long, I have no idea what all of it is supposed to do..

Godiva

5

@Godiva

Thanks for update

but sorry your wrong file adds code can you please read again step.

1 Like
6

haha thanks!

It worked after all

Have a good day !

1 Like
7

@Godiva

Thanks for your support and compliment.

8

Hi - I found this old thread as I am looking to solve a similar issue - centering images on the blog. I followed your path, but under assets my store does not have theme.scss.liquid

It has custom.scss.liquid I tried adding it to the bottom of that file and it did not work. Any insight? Thank you!

1 Like
9

@Angbro02

Sorry for facing this issue, it’s my pleasure to help us.

Welcome to the Shopify community!
and Thanks for your Good question. :blush:

Please share your site URL,
So I will check and provide a solution here.

1 Like
10

Thanks for your help! This is the website blog I’m trying to center: https://vexclothing.com/pages/media-celebrity

When you scroll to the celebrity, press and TV blog sections you will see all of the various blog posts. Some images center and others don’t for some reason. Looking to keep them consistent. Much appreciated.

1 Like
11

@Angbro02

Thanks for post

can you please share the issue screenshot.

1 Like
12

Sure - this specific blog is an example. When we add the blog we select -center- for the text and images. Usually they remain left aligned, or one will center at the bottom and the other left aligned at the top. So throughout our overall celebrity and press updates it is inconsistent. I’d like all images to center.

2 Likes
13

@Angbro02

Thanks for more details.

  1. Go to Online Store->Theme->Edit code
  2. Asset->/styles.scss.css->paste below code at the bottom of the file.
.article_content img {
    margin: 10px auto;
}
1 Like
14

Worked perfectly, thank you!

1 Like
15

@Angbro02

it’s my pleasure to help us

16

Hi!

Sorry, i can’t find /theme.scss.liquid or /styles.scss.css-

What option should i change?

Thanks!

17

Well it is 2024 and I want to center images but also don’t find the suggested trails under theme to add the text. What is the update for this for 2024? This is the current blog post I am working on, and it is driving me crazy.
Thank you!

https://jestpaint.com/blogs/how-to-face-paint-face-painting-tutorials-and-demos/how-to-face-paint-butterfly-face-paint-tutorial

Anna

18

Well it is 2024 and I want to center images but also don’t find the suggested trails under theme to add the text. What is the update for this for 2024? This is the current blog post I am working on, and it is driving me crazy.
Thank you!

https://jestpaint.com/blogs/how-to-face-paint-face-painting-tutorials-and-demos/how-to-face-paint-bu…

Anna