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

Как я могу центрировать изображение внутри div внутри ion-slide-box?

  • 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