Ionic: How to center a div?

Question

THE SITUATION:

I am making an app using Ionic framework. In one page i need to display an image. This image has to be horizontally centered.

ATTEMPT 1:

Following the documentation i have divided one row into three equal columns and put the image in the second one.

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

But unfortunately the image is far to be centered. Tend to stay in the left half of the screen.

ATTEMPT 2:

Trying with some old css tricks.

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

But again i am not getting the desired result.

THE QUESTION:

How can i center a div in Ionic framework?

Answer 1

You already found your answer but I would do something like that instead:

In your css:

.center {     margin-left: auto;     margin-right: auto;     display: block; } 

And then just add this class to your image:

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

This way you don't need to adjust each image on its own and I find this very descriptive when you look at the HTML. Also, it is not restricted to a specific image size.