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