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

How can I center an image within a div within an ion-slide-box?

  • 772

I am trying to center an image inside a divinside a ion-slide-boxlike this

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

The result is this, I have tried a bit of everything cssbut I can not get my desired result

enter image description here

html

2 Answers

  1. Best Answer

    You can use this in your CSS

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

    and in your image the following

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

    This way you don't need to adjust each image by itself and that seems very descriptive to me, when you look at the HTML code. Also, it is not limited to a specific image size.

    • 9

  2. Another way is in your div and flex box

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

    and in your div

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