Ionic: How to center a div?

Question

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?

`` worked for me. Don't no way it's been deprecated in html standard — Dev, Sep 22 '17 at 17:35
`` is obsolete and not supported in HTML5. It's been strongly recommended not to use styling tags in structural documents such as HTML for a long time. https://developer.mozilla.org/en-US/docs/Web/HTML/Element/center — gelliott181, Mar 27 '19 at 20:40

Avi · Answer 1 · 2018-04-11T18:25:47.130

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.

0x1ad2 · Accepted Answer · 2017-03-10T13:21:43.690

32

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>

edited Mar 10 '17 at 13:21

answered Nov 30 '16 at 15:08

0x1ad2

7,496
8
32
42

score 6 · Answer 3 · answered Jun 25 '15 at 13:02

6

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>

answered Jun 25 '15 at 13:02

Michael

2,975
1
15
14

1

Ok, will require some extra work to get the width of each image but seems working properly. Strange is not contemplated in Ionic grid system no? – FrancescoMussi Jun 25 '15 at 13:14

score 4 · Answer 4 · answered Jun 25 '15 at 12:52

4

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>

answered Jun 25 '15 at 12:52

michelem

13,169
4
44
60

3

"col-center" is for vertical centring. – wassimans Aug 31 '15 at 14:48

score 1 · Answer 5 · answered May 11 '19 at 19:10

1

Simple:

<div align="center">
    <img style="height:100px;width:100px" src="https://upload.wikimedia.org/wikipedia/commons/6/6a/JavaScript-logo.png" />
</div>

answered May 11 '19 at 19:10

Khurshid Ansari

3,258
2
24
42

score 0 · Answer 6 · answered Sep 27 '16 at 13:15

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.

Ionic: How to center a div?

6 Answers6