CODEWITHSUNDEEP
cssangularionic-framework
jmann
jmann

Reputation: 379

how can I center an image in ionic 2 app

hello I have some pages in an ionic 2 app, that have an inside a .. 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 centered horizontally.. I have tested some css but without luck.. how can I achieve that?

Upvotes: 8

Views: 25163

Answers (2)

Abdul Mojid
Abdul Mojid

Reputation: 1

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

Upvotes: 0

maninak
maninak

Reputation: 2726

You can use ionic CSS utilities to align center by applying the attribute text-center to 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 the <img> in a <div> so that it affects only the image and not the <p> elements.

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>

Upvotes: 21

Related Questions