如何在中心对齐离子标签?
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-row
和 ion-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>
我正在创建 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-row
和 ion-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>