将 3 张图片居中对齐 div

Question

我有代码 html 使用 angular material 库：

<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

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

text-align:center;

Answer 2

使父容器（布局="row"）具有css 属性:

text-align: center;

并且 ng-repeated 容器具有属性:

display: inline-block;

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

text-align: left;

Answer 3

因为你正在使用 angular material 你可以很容易地用 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;
}

将 3 张图片居中对齐 div

align 3 images center in div

html

css

angularjs

angularjs-material