Ionic: How to center a div?

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>

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>

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.


In Ionic Framework 2 you could now use the attribute directives center and text-center for that.

<ion-row>
  <ion-col text-center>
    <a href="#">My centered text</a>
  </ion-col>
</ion-row>