在 div 中对齐 3 个图像中心答案

【问题标题】：align 3 images center in div在 div 中对齐 3 个图像中心
【发布时间】：2016-11-08 05:04:57
【问题描述】：

我有使用角材料库的代码 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 我希望它居中对齐，第四张图片在左侧，而不是居中。
非常感谢。

【问题讨论】：

标签： html css angularjs angularjs-material

【解决方案1】：

由于您使用的是角度材质，因此您可以使用 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;
}

【讨论】：

非常感谢，我的问题已经解决了。我制作 css: justify-content: space-between;

【解决方案2】：

使父容器（layout="row"）具有css属性：

text-align: center;

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

display: inline-block;

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

text-align: left;

【讨论】：

【解决方案3】：

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

text-align:center;

【讨论】：