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

Question

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

  <FlexboxLayout backgroundColor="#bada55" justifyContent="space-between" height="300" 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>

在我的情况下，标签文本向右但不是中心，关于如何做到这一点的任何想法？

Answer 1

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

 <FlexboxLayout backgroundColor="#bada55" justifyContent="space-between" height="300" 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>