web-dev-qa-db-fra.com

Ionic: Comment centrer une div?

LA SITUATION:

Je fais une application en utilisant Ionic framework . Dans une page, j'ai besoin d'afficher une image. Cette image doit être centrée horizontalement.

TENTATIVE 1:

Suite à la documentation i, j'ai divisé une ligne en trois colonnes égales et placé l'image dans la seconde.

 <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ée. Ont tendance à rester dans la moitié gauche de l'écran.

TENTATIVE 2:

Essayer avec de vieilles astuces css.

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

Mais encore une fois, je n'obtiens pas le résultat souhaité.

LA QUESTION:

Comment puis-je centrer une div dans un cadre ionique?

htmlcssangularjsionic-framework
36
FrancescoMussi

Dans Ionic Framework 2 vous pouvez maintenant utiliser les directives attributcenter et text-center pour cela.

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

Vous avez 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 ajoutez simplement cette classe à votre image:

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

De cette façon, vous n'avez pas besoin d'ajuster chaque image séparément et je trouve cela très descriptif quand vous regardez le HTML. En outre, il n'est pas limité à une taille d'image spécifique.

49
Avi

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

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

Cela devrait fonctionner, ajoutez simplement col-centerclass:

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

Pour attribuer un centre de division, la marge 0 auto reste la meilleure option, mais pour cela, vous devez laisser un espace approprié à la division pour en trouver la section centrale.

Avec margin 0 auto, donnez également une largeur appropriée pour que votre div puisse en trouver un emplacement central.

0
jalaj sharma