Question

我使用角度素材库代码html：

＆＃13;

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

＆＃13;

显示：enter image description here 我希望它对齐中心，第四张图像在左边，而不是中心非常感谢你。

Answer 1

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

text-align:center;

Answer 2

使父容器（layout =＆＃34; row＆＃34;）具有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;
  }

您还可以从flex=30代码

中删除html来为卡片提供css

<md-card class="cardProduct">

并且 CSS 将是

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

在div中对齐3个图像中心

3 个答案: