Center Ion-Toggle

Ionic Framework ionic-v3
1

Is it possible to center an ion-toggle on a page? My html looks like this and the toggle is on the right. I would like to center the toggle in the middle of the page.

    <ion-item no-lines padding-top>
      <ion-label>Tap Me</ion-label>
      <ion-toggle [ngModel]="toggle" (ionChange)="go($event)" color="tertiary"></ion-toggle>
    </ion-item>
1 Like
2

Let me know if this works for you.

.forceCenter{
        padding-right: calc(50% - 46px)!important;
    }

 <ion-item no-lines padding-top text-center>
                  <ion-label>Tap Me</ion-label> 
                  <ion-toggle class="forceCenter" text-center [ngModel]="toggle" (ionChange)="go($event)" color="tertiary"></ion-toggle>
                </ion-item>
            <ion-item>
3

You can achieve this by using css/scss:

CSS:

.item-toggle .item-inner {
	display: block;
}
.item-toggle .item-inner .input-wrapper {
	display: block;
    	flex: none;
    	text-align: center;
}
.item-toggle .item-inner ion-toggle.toggle {
	display: block;
    	flex: none;
    	margin-left: auto;
    	margin-right: auto;
}

SCSS:

.item-toggle {
	.item-inner {
		display: block;
		
		.input-wrapper {
			display: block;
    			flex: none;
    			text-align: center;
		}

		ion-toggle.toggle {
			display: block;
    			flex: none;
    			margin-left: auto;
    			margin-right: auto;
		}
	}
}