如何在中心對齊離子標簽？

Question

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

Answer 1

您可能需要帶着這個回到繪圖板並查看 Ionic 4 使用默認樣式的方式。

本文解釋了可供您使用的內置類，包括一些 flex 選項：

• CSS 實用工具 - 離子文檔

ion-row和ion-col已經應用了 flex 的東西，所以你正在與它們作斗爭，可能會導致問題：

• 響應式網格 - 離子文檔

一般來說，你最好的選擇是依靠框架已經提供的東西，因為這將是最好的測試選項，然后

另外，供將來參考的提示：使用text-center作為這樣的指令更像是 Ionic 3 的做事方式。

新的推薦方法是使用class="ion-text-center"來應用它。

這是因為您無法在 React 或 Vue 中添加這些指令，例如text-center ，因此它們標准化了為每個人使用類。

Answer 2

將寬度設為 100vw 給 .user_Name 類。 如果您希望它在中心對齊，它將起作用。 問題是您已經修復了 width: 200px 並嘗試對齊其中的文本。 然后這將再次解決 css 部分的問題。

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

Answer 4

只需像下面一樣刪除寬度

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

Answer 5

使用display: flex on ion-col和margin: auto on ion-label

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

Answer 6

我不知道。 但是你可以試試這個。 它可能會起作用。

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

Answer 7

.user_Name {
  margin: auto;
}

<ion-row class="User_Label_Section">
  <ion-col text-center>
    <ion-label class="user_Name">ABCDEFG</ion-label>
  </ion-col>
</ion-row>