get ion-radio in the center - css

Question

I'm currently working a privacy page in html with Ionic 3 and my output should be like this :
Right now with my code, this is what I get:
This is my code:
<ion-list radio-group [(ngModel)]="flag1">
<ion-grid item-center style="border-style: none">
<ion-row item-center style="border-style: none">
<ion-col col-4>
<ion-item style="border-style: none" item-center>
<ion-radio color="dark" [value]="true"></ion-radio>
<ion-label class="radio-text">Si</ion-label>
</ion-item>
</ion-col>
<ion-col col-4>
<ion-item style="border-style: none" item-center>
<ion-radio item-left color="dark" [value]="false"></ion-radio>
<ion-label item-center class="radio-text">No</ion-label>
</ion-item>
</ion-col>
</ion-row>
</ion-grid>
</ion-list>
and my css looks like this:
.radio-text {
font-size: 12px;
white-space: pre-line;
text-justify: auto;
display: inline-block;
}
And need as well to remove that annoying black bar, already tried with border 0 but didn't work, anyone got a solution for this?

Answer 1

To center add <ion-col col-2></ion-col> before radio buttons:
<ion-list radio-group [(ngModel)]="flag1">
<ion-grid item-center style="border-style: none">
<ion-row item-center style="border-style: none">
<ion-col col-2></ion-col>
<ion-col col-4>
<ion-item style="border-style: none" item-center>
<ion-radio item-left color="dark" [value]="true"></ion-radio>
<ion-label class="radio-text">Si</ion-label>
</ion-item>
</ion-col>
<ion-col col-4>
<ion-item style="border-style: none" item-center>
<ion-radio item-left color="dark" [value]="false"></ion-radio>
<ion-label class="radio-text">No</ion-label>
</ion-item>
</ion-col>
</ion-row>
</ion-grid>
</ion-list>
To style it square use:
.radio-text {
font-size: 12px;
white-space: pre-line;
text-justify: auto;
display: inline-block;
}
.radio-md .radio-icon, .radio-wp .radio-icon{
border-radius: unset !important;
}
.input-wrapper {
-webkit-flex: 0!important;
-ms-flex: 0!important;
flex: 0!important;
}
.item-md .radio-md[item-left], .item-md .radio-md[item-start] {
margin: 0!important;
}