Home / Questions / 48053
Accepted
Jorius
Asked: 2020-02-07 13:37:58 +0800 CST 2020-02-07 13:37:58 +0800 CST

如何在 ion-slide-box 内的 div 中居中图像？

  • 772

我正在尝试将图像居中在这样的div内部ion-slide-box

<ion-content>
    <ion-slide-box on-slide-changed="slideHasChanged($index)"
                auto-play="true"
                slide-interval="2000"
                does-continue="true"
                show-pager="false"
                style="height: 200px !important;">
        <ion-slide ng-repeat="image in images">
            <div style="text-align: center; width: 300px;">
                <img ng-src="{{ image.src }}" style="width: 100%; text-align: center !important;"/>
            </div>
        </ion-slide>
    </ion-slide-box>
</ion-content>

结果是这样的，我尝试了一切css，但我无法得到我想要的结果

在此处输入图像描述

html

2 Answers

  1. Best Answer

    你可以在你的 CSS 中使用它

    .center {
    margin-left: auto;
    margin-right: auto;
    display: block;
}

    并在您的图像中

    <img ng-src="{{ image.src }}" class="center"/>

    这样你就不需要自己调整每个图像，当你查看 HTML 代码时，这对我来说似乎很有描述性。此外，它不限于特定的图像尺寸。

    • 9

  2. 另一种方法是在您的 div 和 flex 框中

    .container-img{
  display: flex;
  justify-content: center;
  align-items: center;
}

    在你的 div 中

    <div class="container-img">
<img src={{img.src}} alt="Nuevo Diseño">
</div>
    • 0