Ionico: come centrare un div?

Question

LA SITUAZIONE:

Sto facendo un app utilizzando Ionic framework. In una pagina ho bisogno di visualizzare un'immagine. Questa immagine deve essere centrata orizzontalmente.

TENTATIVO 1:

seguito della documentation ho diviso una riga in tre colonne uguali e mettere l'immagine nel secondo.

<div class="row"> 
    <div class="col col-33"></div> 
    <div class="col col-33"> 
     <img src="{{ data.logo }}" alt=""> 
    </div> 
    <div class="col col-33"></div> 
</div> 

Ma sfortunatamente l'immagine è lontana da essere centrata. Tendono a rimanere nella metà sinistra dello schermo.

TENTATIVO 2:

Cercando con alcuni vecchi trucchi css.

<div style="margin: 0 auto;"> 
    <img src=" {{ data.logo }} " alt="" > 
</div> 

Ma di nuovo non ottengo il risultato desiderato.

LA DOMANDA:

come posso centrare un div nel quadro ionico?

Answer 1

hai già trovato la risposta, ma vorrei fare qualcosa di simile, invece:

nel CSS:

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

E poi basta aggiungere questa classe alla vostra immagine:

<img src="{{ data.logo }}" class="center" alt=""> 

In questo modo non è necessario regolare ogni ima ge da solo e trovo questo molto descrittivo quando si guarda l'HTML. Inoltre, non è limitato a una dimensione specifica dell'immagine.

Answer 2

Questo dovrebbe funzionare, basta aggiungere col-center classe:

<div class="row"> 
    <div class="col col-33"></div> 
    <div class="col col-33 col-center"> 
     <img src="{{ data.logo }}" alt=""> 
    </div> 
    <div class="col col-33"></div> 
</div> 

Answer 3

tuo 2 ° tentativo funziona se si aggiunge lo stile width. La larghezza dovrebbe essere la larghezza dell'immagine.

<div style="margin: 0 auto; width:100px"> 
    <img src=" {{ data.logo }} " alt="" > 
</div> 

Answer 4

Per assegnare un centro div, il margine 0 auto è ancora l'opzione migliore ma per questo è necessario fornire uno spazio adeguato al div per trovare la sezione centrale di esso e quindi è necessario fornirne un po '.

Insieme a margin 0 auto anche dare una larghezza adeguata in modo che il div può trovare una posizione centrale di esso.

Answer 5

In Ionic Framework 2 è ora possibile utilizzare lo attribute directivescenter e text-center per quello.

<ion-row> 
    <ion-col text-center> 
    <a href="#">My centered text</a> 
    </ion-col> 
</ion-row>