Ion-spinner align center

Ionic Framework ionic-v3
1

I code like bellow ,in this code I have a ion-spinner which is align to left of the screen . how I align this to center

<ion-navbar *navbar>
    
    <ion-title>Home</ion-title>

</ion-navbar>

<ion-content padding>
     <ion-spinner name="crescent"></ion-spinner>
   

</ion-content>

image
Untitled.png372×615 4.39 KB

2

try…

<ion-content padding class="spinnerCenter">
    <ion-spinner name="crescent"></ion-spinner>
</ion-content>

.spinnerCenter {
    display: flex;
    flex-direction: column;
    justify-content: center; <- Horizontal align
    align-items: center; <- Vertical align
    height: 100%;
}

More about flex layout https://css-tricks.com/snippets/css/a-guide-to-flexbox/

2 Likes
3

ion-spinner's default display is inline-block. A simpiler option if you want is to use some css

  ion-spinner {
    display: block;
    margin: auto;
  }
11 Likes
4

Hi thankx for reply .I try your code but position not changed.

5

Hi thankx for reply .I try your code ,position changed to center ,but how I set the spinner center-top position.

6 
ion-spinner * {
    stroke: #ff0000;
    fill: #8b0000;
    position: fixed;
    z-index: 999;
    height: 5em;
    width: em;
    overflow: show;
    margin: auto;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
  }
2 Likes
7

Thank you mhartington. It works like a charm!