CODEWITHSUNDEEP
reactjsmaterial-ui
Sri
Sri

Reputation: 2318

Vertical align cards in a grid material-ui

Im trying to align some cards vertically in the grid. Here is my sample code.

I have tried the following

  1. Using align="center" and putting the <Box m={1}> section inside another box with display="flex" align="center"
  2. Using the grid system and using align="center"

Both solutions seem to squish the cards horizontally and not vertically align them.

    <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 protected]
              </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>

Upvotes: 0

Views: 3641

Answers (1)

Michael
Michael

Reputation: 1872

You should add flexDirection property to <Box m={1}> to align your card vertically.

Try this:

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

Upvotes: 2

Related Questions