离子输入离子2中的对齐文本

Posted 2023-03-06

【中文标题】离子输入离子2中的对齐文本

【英文标题】：align-text in ion-input Ionic 2

【发布时间】：2018-04-23 13:55:37

【问题描述】：

我在 ionic 中有这个 html

<ion-label color="primary" stacked>Email</ion-label>
<ion-input type="email" placeholder="Email Input"></ion-input>

如何使文本输入在右侧对齐文本

【参考方案1】：

<div class="topPedding">
    <ion-item>
      <ion-input type="text" placeholder="Username" text-center></ion-input>
    </ion-item>
    <ion-item>
      <ion-input type="password" placeholder="Password" text-center></ion-input>
    </ion-item>
    <ion-item class="border-none" lines="none">
      <ion-toggle color="primary"></ion-toggle>
      <ion-label>Rem[![enter image description here][1]][1]ember Password</ion-label>
    </ion-item>
    <ion-button color="light" expand="block">Sign In</ion-button>
  </div>

【参考方案2】：

离子 3：

<ion-input text-center></ion-input>

【讨论】：

现在看起来真的很容易。要右对齐，text-right 也可以。很惊讶这没有记录。

【参考方案3】：

在每个ion-input 里面都有一个input，这个输入就是你需要的样式，只需执行以下操作：

ion-input 
  input 
    text-align: right;
    /* IF YOU ALSO WANT TO PUSH PLACHEHOLDER TO THE RIGHT USE THE FOLLOWING, IF NOT JUST DELETE THE ::-webkit-input-placeholder*/
    ::-webkit-input-placeholder 
      text-align: right;
    
  

希望这会有所帮助。