在 div 中对齐 3 个图像中心

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>

它显示：在此处输入图像描述我希望它居中对齐，第四张图像在左侧，而不是居中。
非常感谢。

Answer 1

只需将图像父级的text-align属性设置为center 。

text-align:center;

Answer 2

使父容器 (layout="row") 具有 css 属性：

text-align: center;

并且 ng-repeated 容器具有以下属性：

display: inline-block;

如果您有这些容器的任何文本，则可能需要：

text-align: left;

Answer 3

由于您使用的是有角度的材料，因此您可以使用 flex-box 轻松做到这一点如果有更多图像将有所帮助将您的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;
  }

您还可以通过从html代码中删除flex=30来为卡片提供 css

<md-card class="cardProduct">

和CSS将是

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