получить ионное радио в центре

Question

В настоящее время я работаю на странице конфиденциальности в html с Ionic 3, и мой вывод должен быть таким:

Прямо сейчас с моим кодом, это то, что я получаю:

Это мой код:

<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>

и мой CSS выглядит так:

.radio-text {
  font-size: 12px;
  white-space: pre-line;
  text-justify: auto;
  display: inline-block;
}

И нужно тожеудалить эту надоедливую черную полосу, уже пробованную с границей 0, но не сработавшую, у кого-нибудь есть решение для этого?

Answer 1

К центру добавьте <ion-col col-2></ion-col> перед переключателями:

<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>

Для оформления квадрата используйте:

.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;
}