Ionique: Comment faire pour centrer un div?

LA SITUATION:

Je suis prise d'une application à l'aide de Ionique cadre. Dans une page, j'ai besoin d'afficher une image. Cette image doit être centrée horizontalement.

TENTATIVE 1:

À la suite de la la documentation j'ai divisé une ligne en trois colonnes et de mettre l'image dans le second.

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

Mais, malheureusement, l'image est loin d'être centré. Ont tendance à rester dans la moitié gauche de l'écran.

TENTATIVE 2:

Essayer avec quelques vieux css astuces.

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

Mais encore une fois je ne suis pas d'obtenir le résultat souhaité.

LA QUESTION:

Comment centrer une div Ionique dans cadre?

  • <center></center> a fonctionné pour moi. Ne pas manière dont elle a été déprécié en html standard
  • <center> est obsolète et n'est pas supporté en HTML5. Il est fortement recommandé de ne pas utiliser le style des balises structurelles des documents tels que HTML pour longtemps. developer.mozilla.org/en-US/docs/Web/HTML/Element/center
InformationsquelleAutor FrancescoMussi | 2015-06-25
  1. 28

    Dans Ionic Framework 2 vous pouvez maintenant utiliser le attribut directives center et text-center pour que.

    <ion-row>
  <ion-col text-center>
    <a href="#">My centered text</a>
  </ion-col>
</ion-row>
    • Cela devrait être la réponse.
    InformationsquelleAutor 0x1ad2
  2. 51

    Vous déjà trouvé votre réponse, mais je voudrais faire quelque chose comme ça à la place:

    Dans votre css:

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

    Et puis il suffit d'ajouter cette classe à votre image:

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

    De cette façon, vous n'avez pas besoin de régler l'image sur son propre, et je trouve cela très descriptif lorsque vous regardez le code HTML. Aussi, il n'est pas limité à une taille de l'image.

    InformationsquelleAutor Avi
  3. 6

    Votre 2ème tentative fonctionne si vous ajoutez le width style. La largeur doit être de la largeur de l'image.

    <div style="margin: 0 auto; width:100px">
    <img src=" {{ data.logo }} " alt="" >
</div>
    • Ok, va nécessiter un travail supplémentaire pour obtenir la largeur de chaque image, mais semble fonctionner correctement. Étrange n'est pas envisagé dans Ionique système de grille non?
    InformationsquelleAutor Michael
  4. 4

    Cela devrait fonctionner, il suffit d'ajouter col-centerclasse:

    <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>
    • Merci pour la réponse. Étrange, n'est pas de travail..
    • "col-center" est pour le centrage vertical.
    InformationsquelleAutor michelem
  5. 0

    À allign un div centre, marge 0 auto est toujours la meilleure option, mais pour cela, vous devez fournir suffisamment d'espace à la div pour trouver le centre de celui-ci et, par conséquent, vous devez fournir certains avec.

    Avec margin 0 auto aussi donner une largeur appropriée de sorte que votre div pouvez trouver un emplacement de centre de.

    InformationsquelleAutor jalaj sharma
  6. 0

    Simple:

    HTML:

    <div align="center">
    <img style="height:100px;width:100px" src="https://upload.wikimedia.org/wikipedia/commons/6/6a/JavaScript-logo.png" />
</div>

    InformationsquelleAutor Khurshid Ansari