默认情况下,标签内的文本在 iOS 上是垂直对齐的,但在 Android 上则不是。如何在 Android 上垂直居中(我有兴趣在 Label 内居中文本,而不是将标签包装在任何其他布局中以获得相同的效果)?

要了解我的意思,请在 iOS 和 Android 上运行下一个代码。

xml:

<Page xmlns="http://schemas.nativescript.org/tns.xsd" loaded="onLoaded"> 
    <Label text="test" /> 
</Page> 

css:
Label { 
    width: 60; 
    height: 60; 
    text-align: center; 
    background-color: aquamarine; 
    border-radius: 30; 
} 

请您参考如下方法:

相应地将内边距设置为 (width - font-size)/2(对于大写或小写字母具有不同中心点的较小框,粗略的近似值可能不同)

例如

Label { 
    width: 60; 
    height: 60; 
    border-radius: 30; 
    text-align:center; 
    background-color: aquamarine; 
    padding: 15; 
    font-size: 20; 
} 

或更大尺寸的示例:
Label { 
    width: 200; 
    height: 200; 
    border-radius: 100; 
    text-align:center; 
    background-color: aquamarine; 
    padding: 80; 
    font-size: 20; 
} 

p.s 如果您将标签包装在 StackLayout 中,则不需要高度

例如
  <StackLayout> 
    <Label text="test" class="title"/> 
  </StackLayout> 
 
Label { 
    width: 200; 
    border-radius: 100; 
    text-align:center; 
    background-color: aquamarine; 
    padding: 80; 
    font-size: 20; 
} 


评论关闭
IT干货网

微信公众号号:IT虾米 (左侧二维码扫一扫)欢迎添加!