如何在中心对齐离子标签?

How to align ion-label in center?

我正在创建 ionic 4 angular 应用程序,并使用 ion-label 打印一些 text.I 面临 ion-label 问题,我会将 ion-label 分配给中心但没有工作。使用了哪个 css 或离子预定义 css?在我的 css 代码下方给出 ...

.User_Label_Section {
  position: fixed;
  display: flex;
  justify-content: center;
  margin-top: 107px;
}

.user_Name {
  display: flex;
  justify-content: center;
  width: 200px;
}
<ion-row class="User_Label_Section">
  <ion-col text-center>
    <ion-label class="user_Name">ABCDEFG</ion-label>
  </ion-col>
</ion-row>

我不确定。但你可以试试这个。可能有用。

 .user_Name {
      text-align: center;
      width: 200px;
    }

您可能需要回到绘图板并查看 Ionic 4 使用默认样式的方式。

本文介绍了您可以使用的 built-in 类,包括一些弹性选项:

ion-rowion-col 已经应用了 flex 内容,因此您正在与它们作斗争并可能导致问题:

一般来说,您最好的选择是依靠框架已经提供的内容,因为这将是经过最佳测试的选项,然后

此外,一个供将来参考的提示:使用 text-center 作为这样的指令更像是 Ionic 3 的做事方式。

新的推荐方法是使用 class="ion-text-center" 来应用它。

这是因为您不能在 React 或 Vue 中添加 text-center 等指令,因此他们标准化了对每个人使用 类。

将宽度设为 100vw 给 .user_Name class。如果您希望它居中对齐,它将起作用。问题是你已经固定了 width: 200px 并试图对齐其中的文本。然后这将再次解决 css 部分的问题。

width: 100% 就够了

.User_Label_Section {
  position: fixed;
  display: flex;
  width: 100%;
  justify-content: center;
  margin-top: 107px;

}

.user_Name {
  display: flex;
  justify-content: center;
  width: 200px;
}
<ion-row class="User_Label_Section">
  <ion-col text-center>
    <ion-label class="user_Name">ABCDEFG</ion-label>
  </ion-col>
</ion-row>

像下面那样去掉宽度

.user_Name {
  display: flex;
  justify-content: center;
}

ion-col 上使用 display: flex,在 ion-label

上使用 margin: auto
    <ion-row>
      <ion-col style="display: flex;">
        <ion-label style="margin:auto;">ABCDEFG</ion-label>
      </ion-col>
    </ion-row>