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

Question

我正在创建 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>

Answer 1

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

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

Answer 2

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

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

CSS Utilities - Ionic Documentation

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

Responsive Grid - Ionic Documentation

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

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

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

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

Answer 3

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

Answer 4

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>

Answer 5

像下面那样去掉宽度

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

Answer 6

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

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

How to align ion-label in center?

html

css

ionic4