How can I center-align images in a default blog post?

Technical Q&A
1

Hello all! Setting up shop in the free Label theme from Shopify and using the default blog format. My problem is this: no matter what I do, images I insert into a blog post are A) left-aligned and B) smaller than they should be. I have tried editing the HTML; no dice. Setting the text alignment to center for the photo and its caption also does nothing. When I click to preview, the photo is always small and stuck to the left. I’m unable to provide a link to an exemplary page because we have not launched yet, but this really shouldn’t be the sort of thing that depends on which individual store it is anyway. I just need an HTML insert that’ll work (strategies like adding align=“center” have gotten me nowhere.) Here’s a screenshot:

NDSArkiv_0-1641313392444.png
NDSArkiv_0-1641313392444.png1920×1080 362 KB

UPDATE I have fixed the size but still need help with alignment.

2

Hi @NDSArkiv ,

Go to Assets > theme.min.css and paste this at the bottom of the file:

article .rte img{
	margin: auto;
    margin-bottom: calc(2rem*var(--tw-space-y-reverse));
    margin-top: calc(2rem*(1 - var(--tw-space-y-reverse)));
}

Hope it helps!

3

What happens if you double-click the image in the blog article editor and then set it to center-align?

4

Thank you! I’m still learning how to work with CSS but will keep this in mind.

5

Thanks so much, I had no idea that double-clicking the image would get me that menu of possibilities - choosing center alignment still doesn’t work (it just displays as left-aligned still), but I can use the margin selection to nudge it over by the proper amount (and it makes it easier to resize these without manipulating the html). Have a great day everybody

6

Hi @NDSArkiv ,

Can you send me the password, I will help you check it.

Co when you upload any image, it will display fine without having to change too many steps.