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

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

centering a label in a FlexboxLayout of nativescript-vue

nativescript

nativescript-vue