在MaterialUI网格中垂直对齐按钮

Question

我想在该网格内垂直对齐按钮。我已经尝试过垂直对齐，但是没有效果。我可以使用top: "30%"来调整按钮的垂直位置，但我认为这不是使按钮居中的最佳方法。

<form className={classes.container} noValidate autoComplete="off">
  <Grid container spacing={1}>
    <Grid item xs={5}>
      <TextField
        id="standard-name"
        label="AWS account"
        className={classes.textField}
        margin="normal"
      />
    </Grid>
    <Grid item xs={7}>
      <Button variant="contained" color="primary" className={classes.button}>
        Link AWS account
      </Button>
    </Grid>
  </Grid>
</form>;

Answer 1

这就是您需要的Grid API。用alignItems值来支撑center。阅读CSS中的flexbox并始终先检查文档。