next.js 如何在ChakraUI中垂直对齐元素?

vs3odd8k  于 2023-06-22  发布在  其他
关注(0)|答案(1)|浏览(115)

我读过autoFlow属性和gap。它们不像我使用它们的方式工作。
具体来说,只有当我使用gap=20时,元素才会垂直居中,间隙值为19或21时,所有内容都在顶部对齐。
这是我的代码:

return (
        <Box
            display={{ md: "flex" }}
            alignItems="center"
            minHeight="70vh"
            gap={8}
            mb={8}
            w="full"
        >
          <Box>
            <Grid gap={20}>
              <Heading as="h2" fontSize={{ base: "lg", sm: "3xl" }}>
                Text
              </Heading>
              <Form>
               ...Boxes
              </Form>
            </Grid>
          </Box>
        </Box>
  );

来源:https://chakra-ui.com/docs/layout/grid

hiz5n14c

hiz5n14c1#

据我所知,每个元素都有预定的价值。有一个模式,你有1-10,然后在10之后增加2:
12,14,16,18,20
在20之后,它递增4:
24,28,32,36等等
你只需要实验并弄清楚什么值是允许的,什么最有效。以您的代码为例,您可以使用的正确值是:

<Grid gap={18}>

<Grid gap={24}>

我不知道我还能帮上什么忙。希望这有帮助!

相关问题