Topic: Vertically center product image

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

Phillip Jacobs free answered 3 years ago


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

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

Got it from MDB Utilities FlexBox Docs


Marta Wierzbicka staff answered 4 years ago


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

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

Marta Wierzbicka staff answered 4 years ago


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 4 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;


Please insert min. 20 characters.

FREE CONSULTATION

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

Status

Resolved

Specification of the issue

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