How can I center the image in ionic 2 application?

Question

hello I have several pages in ionic application 2 that has inside ... like this

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

I need to see the image horizontally. I checked a few css, but with no luck. How can i achieve this?

Answer 1

You can use ionic CSS utilities to align the center by applying an attribute text-centerto the parent element of the one you want to center horizontally.

Here is an example:

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

In your case, I would wrap it <img>in <div>so that it only affects the image, not the elements <p>.

Like this:

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

Answer 2

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