Ionic: comment centrer un div?
LA SITUATION:
Je fais une application en utilisant cadre Ionic . Dans une page, j'ai besoin d'afficher une image. Cette image doit être centrée horizontalement.
Tentative 1:
Suite à la documentation j'ai divisé une ligne en trois colonnes égales et mis 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é. Ont tendance à rester dans la moitié gauche de l'écran.
Tentative 2:
Essayer avec quelques vieux trucs 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 un div dans le cadre ionique?
5 réponses
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>
Vous avez déjà trouvé votre réponse mais je ferais 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 seule 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.
Votre 2ème tentative fonctionne si vous ajoutez le width style. La largeur doit être la largeur de l'image.
<div style="margin: 0 auto; width:100px">
<img src=" {{ data.logo }} " alt="" >
</div>
Cela doit 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>
Pour alligner un centre div, margin 0 auto est toujours la meilleure option, mais pour cela, vous devez fournir un espace approprié à la div pour trouver la section centrale de celui-ci et donc vous devez lui fournir.
Avec margin 0 auto donnez également une largeur appropriée pour que votre div puisse en trouver un emplacement central.