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-center
class:
<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>