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.
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>
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>
To allign a div center, margin 0 auto is still the best option but for this you need to provide a proper space to the div to find the center section of it and therefore you need to provide it some with.
Along with margin 0 auto
also give a proper width so your div can find a center location of it.
Simple:
<div align="center"> <img style="height:100px;width:100px" src="https://upload.wikimedia.org/wikipedia/commons/6/6a/JavaScript-logo.png" /> </div>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.