web-dev-qa-db-fra.com

comment puis-je centrer une image dans l'application ionic 2

bonjour j'ai quelques pages dans une application ionic 2, qui ont un intérieur comme ..

<ion-content padding>
  <p>Some text here....</p>
  <p>Some other text here...</p>
  <ion-img width="180" height="180" src="assets/images/goal.jpg"></ion-img>  
  <p>bottom text here...</p>
</ion-content>

J'ai besoin de voir l'image centrée horizontalement .. J'ai testé quelques css mais sans chance .. comment puis-je y parvenir?

cssangularionic-framework
8
jmann

Vous pouvez utiliser ionic tilitaires CSS pour aligner le centre en appliquant l'attribut text-center à l'élément parent de celui que vous souhaitez centrer horizontalement.

Voici un exemple:

<ion-content text-center>
    <img src="assets/imgs/logo.png" width="128" />
</ion-content>

Dans votre cas, j'envelopperais le <img> dans un <div> afin qu'il n'affecte que l'image et non le <p> éléments.

Comme ça:

<ion-content padding>
  <p>Some text here....</p>
  <p>Some other text here...</p>
  <div text-center>
     <ion-img width="180" height="180" src="assets/images/goal.jpg"></ion-img>  
  </div>
  <p>bottom text here...</p>
</ion-content>
21
maninak
<ion-content text-center>
    <p align="center"><ion-img src="assets/imgs/logo.png" width="128"></ion-img></p>
</ion-content>
0
Abdul Mojid