如何在shadcn表单组件中居中对齐复选框与FormLabel？

你的代码里有两个关键问题导致复选框和标签无法居中对齐：

1. FormLabel的flex属性无效：你给FormLabel加了justify-center items-center，但FormLabel默认是块级元素，这些是flex容器的属性，对它根本不起作用。
2. 缺少垂直对齐的关键设置：虽然FormItem已经设了items-center，但shadcn的FormLabel默认带基线对齐样式，需要手动强制垂直居中。

修改后的代码如下：

<div className="flex flex-row items-center space-x-4">
  <LoadingBtn type="submit" loading={isSubmitting}>
    Submit
  </LoadingBtn>
  <FormField
    control={control}
    name="shoutout"
    render={({ field }) => (
      <FormItem className="flex flex-row items-center space-x-3">
        <FormControl>
          <Checkbox
            checked={field.value}
            onCheckedChange={field.onChange}
          />
        </FormControl>
        <FormLabel className="font-light text-sm italic align-middle">
          Add "created by Longpost" to the end of your post
        </FormLabel>
      </FormItem>
    )}
  />
</div>

核心修改点：

• 删掉FormLabel上没用的text-center justify-center items-center，换成align-middle，强制标签文本和复选框垂直居中对齐。
• 保留FormItem的items-center，维持整个行内元素的垂直居中布局。

如果还有细微偏差，可以给Checkbox加my-0去掉它自带的上下margin，或者给FormLabel加flex items-center h-full，让文本在标签容器内完全居中。

内容的提问来源于stack exchange，提问作者monte