How can I center product images on my webpage?

Store Design
1

Hello

This is my listing link https://velmox.com/collections/beauty-personal-care/products/victorias-secret-natural-beauty-moisturizing-cream-body-wash

You can see the image box, the image is not in the center i need to make it in the middle of the box. please help me with this.

2

Hello,
Please share the screenshot.

1 Like
3

Here’s the image https://prnt.sc/1mgriw2

4 
div#ProductPhoto-product-template {
    text-align: center;
    margin: 0 auto;
}

Add this css at the bottom of
Online Store->Theme->Edit code->Assets->theme.scss.liquid

5

hello @velmox

please Go to Online Store->Theme->Edit code then go to assets/style.css ->paste below code at the bottom of the file.

#shopify-section-product-template .product-template .product-images .featured {
    margin: 0 auto;
}
6

Hi, thanks for the code, but i didnt have the style.css in assets but the other solution from oscprofessional worked

7

Thanks @oscprofessional it worked!

8

Also can you please tell me if we can fix the image box size, so if you open this https://velmox.com/collections/home-and-gardening-tools/products/home-depot-heavy-duty-brown-paper-30-gallon-lawn-and-refuse-bags-for-home-and-garden-20-lawn-bags

and select different images and you will see the first image is big in length 2nd image is in normal and 3rd and 4th image same high in length so when someone clicks on images it moves the thumbnails up and down. So just wanted to make a fixed size of the box so images can then be auto-adjusted in there and when to hover the mouse to image it zoom in and one-click as well.