如何在離子工具欄的中心設置和對齊離子選擇

Question

我想在離子工具欄上設置選擇選項，但我無法將它對齊到中心，我嘗試了很多東西......通過使用這些方法我無法這樣做，

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

此方法將輸入框居中對齊，但不會將選擇選項居中對齊。 這是一個堆棧閃電戰

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

這也不影響，誰能告訴我如何將選擇選項設置為在離子工具欄上居中？

Answer 1

我認為文本中心不起作用，因為離子選擇是組件。 我通過在網格中使用ion-select來解決它。

<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

您需要為 margin-left、margin-right、max-width 和 width percentage 設置百分比。 以下是我的示例（僅采用樣式）：

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