Need help centering the image in an image section.

[MatthewChandler]

I have a simple image section without any text. The image is automatically left-aligned and I would like for it to be centered. Would anyone know how to accomplish this?

store: www.leatherandmoreinhickory.com

Theme: Trademark

Section:

{{ section.settings.image_1 | img_url: ‘2048x’ | img_tag }}
{% schema %}
{
“name”: “Image justified”,
“settings”: [
{
“type”: “image_picker”,
“id”: “image_1”,
“label”: “Image”
}
],
“presets”: [
{
“name”: “Image”,
“category”: “Content”
}
]
}

{% endschema %}

[made4Uo]

Hi @MatthewChandler ,

Please follow the instructions below to make the image centered

1. From your Admin Page, click Online Store > Themes >Actions > Edit code
2. In the Asset folder, open the theme.css
3. Paste the code below at the very bottom of the file.

div#shopify-section-1aee553b-4b96-4fa7-9817-1a59ac650b05 {
    display: flex;
    justify-content: center;
    align-items: center;
}

[MatthewChandler]

I added the code and it didn’t seem to have any effect on it.

[made4Uo]

The section ID got changed. Try the code below instead, same instruction

#main .shopify-section:nth-child(14) {
    display: flex;
    justify-content: center;
    align-items: center;
}

[MatthewChandler]

Yes, that fixed it! May I ask you how I can find the section codes so I can do this with other sections? That makes so much sense now.

[MatthewChandler]

I’m sorry, the Section ID is what I meant.

[made4Uo]

@MatthewChandler

I change the code so it calls the 14th child of the main, Refer to the image below