¿Cómo puedo centrar una imagen dentro de un div dentro de un ion-slide-box?

publicado por: Anonymous

Estoy tratando de centrar una imágen dentro de un div dentro de un ion-slide-box de la siguiente forma

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

El resultado es este, he intentado de todo un poco mediante css pero no logro obtener mi resultado deseado

introducir la descripción de la imagen aquí

solución

Puedes utilizar esto en tu CSS

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

y en tu imagen lo siguiente

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

De esta manera no es necesario ajustar cada imagen por sí misma y eso me parece muy descriptiva, cuando nos fijamos en el código HTML. Además, no se limita a un tamaño específico de la imagen.

Respondido por: Anonymous

Leave a Reply

Your email address will not be published. Required fields are marked *