如何将离子标签对齐？答案

【问题标题】：How to align ion-label to right?如何将离子标签对齐？
【发布时间】：2016-08-31 13:27:29
【问题描述】：

我正在开发 Ionic v2，并且面临将离子标签值向右对齐的问题。以下是代码sn-p：

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

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

【问题讨论】：

标签： ionic2

【解决方案1】：

您也可以使用text-right 属性指令，如下所示。

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

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

为 Ionic 5 编辑

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

【讨论】：

同意。在 SO 上更改正确答案甚至是一回事吗？

【解决方案2】：

只需使用 text-align 而不是 float。

.alignme {
    text-align: right;
}

顺便说一句，您应该只将离子标签与表单一起使用 - 离子输入、离子复选框等。

【讨论】：

在ion-item 中使用ion-label 没有任何问题。检查离子文档link

【解决方案3】：

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

Documenation

版本 2-3：

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

版本 4+：

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

【讨论】：

对于 Ionic 4+，这里是文档：ionicframework.com/docs/layout/css-utilities#text-alignment

【解决方案4】：

如果还是不成功，试试这个

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

    }

【讨论】：

【解决方案5】：

在 ionic 5 中，这对我有用。

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

【讨论】：