align 3 images center in div

Question

i have code html using angular material library:

<div layout="row"   layout-wrap  style="background: yellow; ">
    <div  ng-repeat="pro in Products"   >
      <md-card class="cardProduct" >
        <img ng-src={{pro.Image1}} class="md-card-image imageProduct">
      </md-card>
    </div>
</div>

it shows: enter image description here I want it align center, and the fourth image is in the left, not center.
Thank you so much.

Answer 1

Since you are using angular material you can easily do this with flex-box It will help if there are more images to come Change your html code as

HTML:

<div layout="row"   layout-wrap  style="background: yellow; ">
        <div class="prod-container"  ng-repeat="pro in Products"   >
            <md-card class="cardProduct" flex="30" >
                <img   ng-src={{pro.Image1}} class="md-card-image imageProduct">
            </md-card>
        </div>
    </div>

CSS:

.prod-container{
   display: flex;
   flex-wrap: wrap;
   justify-contents: flex-start;
  }

you can also give css for the cards by removing flex=30 from the html code

<md-card class="cardProduct">

and the CSS will be

.cardProduct{
  min-width: 30%;
  flex: 1;
}