Question

我正在尝试在网格中垂直对齐某些卡片。这是我的示例代码。

我尝试了以下

使用align =“ center”并将<Box m={1}>部分放在带有display="flex" align="center"的另一个框中
使用网格系统并使用align="center"

这两种解决方案似乎都是水平挤压卡片，而不是垂直对齐卡片。

    <Grid item md={6} xs={12}>
      <Box m={1}>
        <Box mb={2}>
          <Card className={classes.root} elevation={cardElevation}>
            <CardContent style={{ paddingBottom: "0px" }}>
              <Typography variant="h5" component="h2">
                Email <EmailIcon />
              </Typography>
            </CardContent>
            <Box display="flex" justifyContent="center">
              <Button
                size="small"
                color="primary"
                align="center"
                href={links.Email}
              >
                email@gmail.com
              </Button>
            </Box>
          </Card>
        </Box>
        <Box mb={2}>
          <Card className={classes.root} elevation={cardElevation}>
            <CardContent style={{ paddingBottom: "0px" }}>
              <Typography variant="h5" component="h2">
                LinkedIn <LinkedInIcon />
              </Typography>
            </CardContent>
            <Box display="flex" justifyContent="center">
              <Button
                size="small"
                color="primary"
                align="center"
                href={links.LinkedIn}
              >
                View My Profile
              </Button>
            </Box>
          </Card>
        </Box>
      </Box>
    </Grid>

Answer 1

您应该向flexDirection添加<Box m={1}>属性，以垂直对齐卡。

尝试一下：

<Grid item md={6} xs={12}>
  <Box m={1} display="flex" alignItems="center" flexDirection="column">
    <Box mb={2}>
     ...
    </Box>
    <Box mb={2}>
      ...
    </Box>
  </Box>
</Grid>

网格材质中的垂直对齐卡-UI

1 个答案: