网格材料-ui中的垂直对齐卡片答案

【问题标题】：Vertical align cards in a grid material-ui网格材料-ui中的垂直对齐卡片
【发布时间】：2020-12-12 10:28:43
【问题描述】：

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

我已经尝试了以下

使用 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>

【问题讨论】：

标签： reactjs material-ui

【解决方案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>

【讨论】：