Ionic: How to center a div?

Question

Ionic: How to center a div?

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?

html
css
angularjs
ionic-framework

Answer 1

Your 2nd attempt works if you add the width style. The width should be the width of the image.

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

Answer 2

This should work, just add col-centerclass:

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