【问题标题】: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

    &lt;md-card class="cardProduct"&gt;

    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;
      

      【讨论】:

        猜你喜欢
        • 2017-01-25
        • 1970-01-01
        • 2012-03-15
        • 1970-01-01
        • 1970-01-01
        • 2021-07-04
        • 2012-09-02
        • 2018-10-21
        • 2016-09-13
        相关资源
        最近更新 更多