如何在 ionic 中设置和对齐工具栏中心的离子选择

Question

我想在离子工具栏上设置选择选项，但我无法将其对齐到中心，我已经尝试了很多东西......通过使用这些方法我无法这样做，

<div text-center>
     <label class="email">
        <input type="email" placeholder="Email" name="email">
     </label>
 </div>

此方法将输入框居中对齐，但不会将选择选项居中对齐。这是一个stackblitz

<div text-center>
<ion-item>

              <ion-select [(ngModel)]="gaming" interface="popover">
                <ion-option selected value="empty">empty</ion-option>
                <ion-option value="n64">Nintendo64</ion-option>
                <ion-option value="ps">PlayStation</ion-option>
                <ion-option value="genesis">Sega Genesis</ion-option>
                <ion-option value="saturn">Sega Saturn</ion-option>
                <ion-option value="snes">SNES</ion-option>
              </ion-select>
            </ion-item>
</div>

结果还是一样

.item-select{
    position: initial;
    margin-left: 100px;
    width:40%;
    text-align: center;
}

这也不影响，谁能告诉我如何在 ionic 中将选择选项设置为在工具栏上居中？

Answer 1

我认为文本中心将无法工作，因为离子选择是组件。我已经通过在网格中使用离子选择来解决这个问题。

<ion-grid>
    <ion-row>
      <ion-col size="12" offset="4">
          <ion-item>
            <ion-select>
              <ion-select-option selected>item 1</ion-select-option>
                <ion-select-option>item 2</ion-select-option>
            </ion-select>
        </ion-item>
      </ion-col>
    </ion-row>
  </ion-grid>

Answer 2

您需要为左边距、右边距、最大宽度和宽度百分比输入百分比。下面是我的例子（只取样式）：

<ion-select
    name="remark"
    formControlName="event"
    interface="popover"
    [(ngModel)]="remark"
    style="max-width: 100%; width: 80%; height: 25px; margin-left: 10%; margin-right: 10%;"
    (ionChange)="onChange($event)"
    placeholder="Sila pilih satu"> 
        <ion-option value="Y">Yuran</ion-option>
        <ion-option value="L">Lain-lain Bayaran</ion-option>
</ion-select>

Answer 3

我发现解决这个问题的一个非常简单的方法是使用

CSS

：

ion-select{
   width: fit-content;
}

如果您出于某种原因将 ion-select 放在 ion-item 中，则此方法不起作用，但是如果您使用包装器 div，则它可以正常工作：

.selectWrapper{
   justify-content: center;
   align-items: center;
   text-align: center;
}

<div class="selectWrapper">
   <ion-select>
      <ion-select-option></ion-select-option>
      <ion-select-option></ion-select-option>
   </ion-select
</div>