在 nativescript-vue 的 FlexboxLayout 中将标签居中

Posted 2023-04-14

【中文标题】在 nativescript-vue 的 FlexboxLayout 中将标签居中

【英文标题】：centering a label in a FlexboxLayout of nativescript-vue

【发布时间】：2019-01-31 13:44:14

【问题描述】：

在 flexbox 布局中，我希望左侧有一个图像，右侧有一个中心标签标题：

  <FlexboxLayout backgroundColor="#bada55" justifyContent="space-between"  class="head">
    <Image :src="posts.image_url" stretch="aspectFit" class="head_img"/>
    <Label :text="posts.product_name" alignSelf="center" alignContent="center" class="title" textWrap="true"/>
  </FlexboxLayout>

在我的情况下，标签文本向右但不在中心，你知道如何做到这一点吗？

【问题讨论】：

我不明白你想要什么。 “右侧的中心标签标题”？你能用你有什么和你想要什么的截图来编辑你的问题吗？

【参考方案1】：

您可以在标签中添加textAlignment="center"。

 <FlexboxLayout backgroundColor="#bada55" justifyContent="space-between"  class="head">
         <Image :src="posts.image_url" stretch="aspectFit" class="head_img"/>
         <Label :text="posts.product_name" alignSelf="center" alignContent="center" textAlignment="center" class="title" textWrap="true"/>
</FlexboxLayout>