使离子束在中心

Question

我目前正在使用Ionic 3在html中处理隐私页面，我的输出应如下所示：

现在使用我的代码，这就是我得到的：

这是我的代码：

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