如何对齐material-ui Grid项目垂直居中？

Question

我有一个Grid容器和Buttons作为它的子项（Grid-items）。我想将网格项垂直居中对齐。

这是我的要求的视觉表示

这是标记

<Box height="10vh" mr={4}>
  <Grid container justify="flex-end" spacing={2}>
    <Button variant="contained" color="default" type="reset">
      Reset
    </Button>
    <Button
      type="submit"
      variant="contained"
      color="primary"
      onClick={() => handleSubmit()}
    >
      Search
    </Button>
  </Grid>
</Box>;

有人可以告诉我基于material-ui grid API的解决方案吗？

Answer 1

我发现这应该可行，

const useStyles = makeStyles({
  grid: {
    height: "100%"
  }
});

export default function Hook() {
  const classes = useStyles();

  return (
    <Box height="10vh" mr={4}>
      <Grid
        className={classes.grid}
        container
        justify="flex-end"
        alignItems="center"
        spacing={2}
      >
        <Button variant="contained" color="default" type="reset">
          Reset
        </Button>
        <Button
          type="submit"
          variant="contained"
          color="primary"
          onClick={console.log}
        >
          Search
        </Button>
      </Grid>
    </Box>
  );
}

工作沙箱，https://codesandbox.io/s/material-demo-forked-m7fyj?file=/demo.js

Answer 2

<Grid
  container
  direction="row"
  justify="flex-end"
  alignItems="center"
>

我建议您尝试Interactive Demo