Vertically center product image

Topic: Vertically center product image

lukas.olsson@itbmedia.se pro asked 6 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

Phillip Jacobs free answered 5 years ago

0 0 Best answer

Just ran into the same issue and this worked for me:

class="d-flex align-items-center"

Got it from MDB Utilities FlexBox Docs

Add comment

Marta Wierzbicka staff answered 6 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

lukas.olsson@itbmedia.se pro answered 6 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.

<div>        </div>
<div> <div class="col-lg-3 col-md-6 mb-r"></div>
<div></div>
<div>            </div>
<div>            <div class="card card-cascade narrower"></div>
<div></div>
<div>                </div>
<div>                <div class="view overlay hm-white-slight whitebgprod"></div>
<div>                    <img src="https://distribucionesplata.com/tienda/12820-thickbox_default/pan-wasa-delikatess-270-gr.jpg" class="img-fluid mx-auto shoppic" alt=""></div>
<div>                    <a></div>
<div>                    <div class="mask"></div></div>
<div>                    </a></div>
<div>                </div></div>
<div>                </div>
<div></div>
<div>                </div>
<div>                <div class="card-body text-center"></div>
<div>                    </div>
<div>                    <h4 class="card-title"></div>
<div>                        <strong></div>
<div>                            <a href="">Denim trousers</a></div>
<div>                        </strong></div>
<div>                    </h4></div>
<div></div>
<div>                    </div>
<div>                    <p class="card-text">Neque porro quisquam est, qui dolorem ipsum quia dolor sit..</div>
<div>                    </p></div>
<div></div>
<div>                    </div>
<div>                    <div class="card-footer"></div>
<div>                        <span class="left font-bold"></div>
<div>                            <strong>49$</strong></div>
<div>                        </span></div>
<div>                        <span class="right"></div>
<div>                            <a data-toggle="tooltip" data-placement="top" title="Add to Cart"></div>
<div>                                <i class="fa fa-shopping-cart grey-text"></i></div>
<div>                            </a></div>
<div>                            <a data-toggle="tooltip" data-placement="top" title="Share"></div>
<div>                                <i class="fa fa-share-alt grey-text"></i></div>
<div>                            </a></div>
<div>                            <a class="active" data-toggle="tooltip" data-placement="top" title="Added to Wishlist"></div>
<div>                                <i class="fa fa-heart"></i></div>
<div>                            </a></div>
<div>                        </span></div>
<div>                    </div></div>
<div></div>
<div>                </div></div>
<div>                </div>
<div></div>
<div>            </div></div>
<div>            </div>
<div></div>
<div>        </div></div>
<div>        </div>
<div></div>
<div>        </div>
<div> <div class="col-lg-3 col-md-6 mb-r"></div>
<div></div>
<div>            </div>
<div>            <div class="card card-cascade narrower"></div>
<div></div>
<div>                </div>
<div>                <div class="view overlay hm-white-slight whitebgprod"></div>
<div>                    <img src="litenprodukt.jpg" class="img-fluid mx-auto shoppic" alt=""></div>
<div>                    <a></div>
<div>                        <div class="mask"></div></div>
<div>                    </a></div>
<div>                </div></div>
<div>                </div>
<div></div>
<div>                </div>
<div>                <div class="card-body text-center"></div>
<div>                    </div>
<div>                    <h4 class="card-title"></div>
<div>                        <strong></div>
<div>                            <a href="">High heels</a></div>
<div>                        </strong></div>
<div>                    </h4></div>
<div></div>
<div>                    </div>
<div>                    <p class="card-text">Neque porro quisquam est, qui dolorem ipsum quia dolor sit.</div>
<div>                    </p></div>
<div></div>
<div>                    </div>
<div>                    <div class="card-footer"></div>
<div>                        <span class="left font-bold"></div>
<div>                            <strong>89$</strong></div>
<div>                        </span></div>
<div>                        <span class="right"></div>
<div>                            <a data-toggle="tooltip" data-placement="top" title="Add to Cart"></div>
<div>                                <i class="fa fa-shopping-cart grey-text"></i></div>
<div>                            </a></div>
<div>                            <a data-toggle="tooltip" data-placement="top" title="Share"></div>
<div>                                <i class="fa fa-share-alt grey-text"></i></div>
<div>                            </a></div>
<div>                            <a class="" data-toggle="tooltip" data-placement="top" title="Add to Wishlist"></div>
<div>                                <i class="fa fa-heart grey-text"></i></div>
<div>                            </a></div>
<div>                        </span></div>
<div>                    </div></div>
<div></div>
<div>                </div></div>
<div>                </div>
<div></div>
<div>            </div></div>
<div>            </div>
<div></div>
<div>        </div></div>
<div>        </div>

Please insert min. 20 characters.

<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 Wierzbicka staff answered 6 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 6 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

Write

Create snippet

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.

Status

Resolved

Specification of the issue

ForumUser: Pro
Premium support: No
Technology: General Bootstrap questions
MDB Version: -
Device: -
Browser: -
OS: -
Provided sample code: Yes
Provided link: No

lukas.olsson@itbmedia.se

Pro User 12Support score
2Questions 1Answers 0Snippets