How to set and align ion-select in center on toolbar in ionic

Question

I want to set select-option on toolbar in ionic, but I'm unable to align it to center, I have tried many things... by using these methods I'm unable to do so,

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

This method aligns input box to center but it doesn't align select-option to center. here is a 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>

still the results are same

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

This also doesn't affect, can anyone tell me how to set select-option to center on the toolbar in ionic?

Matilda

Can you provide the stackblitz? stackblitz.com – Gardenia

@Matilda Hi, take a look at this article #10814028 – Peterec

If i understand well give a try with this line .alert-radio-label { text-align: center; } – Peterec

@Gardenia see my updated question with stackblitz link – Matilda

Answer 1

I think text-center will not work as ion-select is component. I have worked it around by using ion-select in grid.

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

Eructate

Answer 2

You need to put percent for margin-left, margin-right, max-width and width percentage. Below are my example (just take the style):

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

Earl

Answer 3

One really easy way I found to fix this issue is with CSS:

ion-select{
   width: fit-content;
}

This does not work if you have your ion-select inside a ion-item, however if you use a wrapper div, it works just fine:

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

ion-select{
    width: fit-content;
}

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

Catamount