如何将离子标签右对齐？

Question

我正在研究 Ionic v2，并且在将 ion-label 值对齐到右侧时遇到问题。以下是代码片段：

Html代码：

<ion-content padding class="home">
    <ion-list>
        <ion-item class="clearme">
            <ion-label>Employee Name:</ion-label>
            <ion-label class="alignme">Gaurav</ion-label>
        </ion-item>
    </ion-list>

CSS:

.home {
    background-color: red;
}
    
.alignme {
    float:right !important;
}

.clearme {
    clear: both !important;
}

添加这些后类文本未右对齐。

Answer 1

只需使用文本对齐而不是浮动。

.alignme {
    text-align: right;
}

顺便说一句，您应该只将 ion-label 与表单一起使用 - ion-input、ion-checkbox 等。

Answer 2

您也可以像下面那样使用 text-right 属性指令。

<ion-label text-right>Gaurav</ion-label>

有关属性指令的详细信息，请参阅here

为 Ionic 5 编辑

<ion-label class="ion-text-right">...</ion-label>

Answer 3

如果还是不成功试试这个

 //html
 <ion-item>
  <ion-input type="text" placeholder="Username"></ion-input>
    <ion-label class="alignme">
        <ion-icon name="logo-playstation"></ion-icon>                     
    </ion-label>
  </ion-item>

//css
    .alignme{

        position:absolute;
        right:0 

    }

Answer 4

Ionic 有一个内置的解决方案：

Documenation

版本 2-3：

    <ion-label ion-text-center>
       Centered text
    </ion-label>

版本 4+：

    <ion-label class="ion-text-center">
       Centered text
    </ion-label>

Answer 5

在 ionic 5 中这对我有用。

<ion-item>
    <ion-label slot="start">Left Side</ion-label>
    <ion-label slot="end">Right Side</ion-label>
</ion-item>

如何将离子标签右对齐？

How to align ion-label to right?

ionic2