Align 3 изображения центр DIV

Question

У меня есть код HTML с использованием углового материала библиотеки:

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

он показывает: enter image description here Я хочу это выравнивание по центру, а четвёртое изображение находится в левой , а не центр.
Большое вам спасибо.

Answer 1

Поскольку вы используете угловой материал, который вы можете легко сделать это с помощью гибкой коробки Это поможет, если есть больше изображений приходят Изменить html код как

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

вы также можете дать CSS для карт путем удаления flex=30 из html кода

<md-card class="cardProduct">

и CSS будет

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

Answer 2

просто введите свойство родителя изображений text-align в center.

text-align:center; 

Answer 3

Сделать родительский контейнер (макет = "строка") обладают свойством CSS:

text-align: center; 

, и нг-повторенный контейнеры обладают свойством:

display: inline-block; 

и в случае, если у вас есть текст для этих контейнеров, возможно, потребуется:

text-align: left;