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

【问题标题】：How to align ion-label in center?如何在中心对齐离子标签？
【发布时间】：2021-09-30 09:57:51
【问题描述】：

我正在创建 ionic 4 angular 应用程序，并使用 ion-label 打印一些文本。我遇到了 ion-label 的问题，我将 ion-label 分配到中心但没有工作。使用了哪个 css 或 ionic 预定义 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 为中心，如果您需要整个身体的中心，请告诉我。

标签： html css ionic4

【解决方案1】：

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

【讨论】：

大众，大众可能会在不同的屏幕分辨率上出现问题，对吧？最好在 % 本身中指定。
如果你给某个 div 100vw 那么这意味着你希望它在任何屏幕尺寸中始终居中对齐（对于特定的用例）。如果您的用例相应更改，它将更改。 Vw 意味着始终采用整个屏幕的屏幕尺寸。如果您想在此处根据父 div 对齐，也可以使用 % ，但事实并非如此，因此两者都可以使用。

【解决方案2】：

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

本文介绍了可供您使用的内置类，包括一些 flex 选项：

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，因此它们标准化为每个人使用类。

【讨论】：

【解决方案3】：

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>

【讨论】：

【解决方案4】：

只需像下面这样删除宽度

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

【讨论】：

【解决方案5】：

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

【讨论】：

【解决方案6】：

我不确定。但是你可以试试这个。它可能会起作用。

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

【讨论】：