Vertically center product image

Topic: Vertically center product image

lukas.olsson@itbmedia.se pro asked 7 years ago

I am using Sections + E-commerce + Products v.1 but cannot manage to center the image both horizontally and vertically.I managed to center the image horizontally with mx-auto but are you having a good trick to also center it vertically if I have lets say a product picture of only 20 x 20 pixels. The whitebgprod class is just adding white background to the view div if the image is small and the shoppic is just adding a max-height to the image.

<!--Card image--> <div class="view overlay hm-white-slight whitebgprod"> <img src="litenprodukt.jpg" class="img-fluid mx-auto shoppic" alt=""> <a> <div class="mask"></div> </a> </div><!--Card image-->

Add comment

Marta Szymanska staff pro premium answered 7 years ago

0 0 Best answer

Hi,

I'm not sure how you imagine this, so could you paste here any demo how it should look? I'll try to help.

Best,

Marta

lukas.olsson@itbmedia.se pro commented 7 years ago

I managed to do it by adding the following css to the "view" div holding the product picture: display: flex; align-items: center; flex-wrap: wrap;

Add comment

lukas.olsson@itbmedia.se pro answered 7 years ago

0 0 Best answer

Sure, the product on the left is having a full size image and that becomes centered both horizontally and vertically. However, the product on the right is only approx 30 x 30 pixels and it doesn't center vertically.

<a>

</a>

</div>

<a href="">Denim trousers</a>

</strong>

</h4>

<p class="card-text">Neque porro quisquam est, qui dolorem ipsum quia dolor sit..

</p>

</span>

</a>

</a>

</a>

</span>

</div>

</div>

</div>

<a>

</a>

</div>

<a href="">High heels</a>

</strong>

</h4>

<p class="card-text">Neque porro quisquam est, qui dolorem ipsum quia dolor sit.

</p>

</span>

</a>

</a>

</a>

</span>

</div>

</div>

</div>

Add comment

Marta Szymanska staff pro premium answered 7 years ago

0 0 Best answer

Hi, I don't see your images because links don't work. Could you provide working links to images in your code? Then I will see what is wrong with them. Best, Marta

Add comment

Phillip Jacobs answered 5 years ago