[英]How to set and align ion-select in center on toolbar in ionic
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?这也不影响,谁能告诉我如何将选择选项设置为在离子工具栏上居中?
I think text-center will not work as ion-select is component. 我认为文本中心不起作用,因为离子选择是组件。 I have worked it around by using ion-select in grid.
我通过在网格中使用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>
You need to put percent for margin-left, margin-right, max-width and width percentage.您需要为 margin-left、margin-right、max-width 和 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>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.