如何使用 Material UI 和 Flexbox 使播放按钮居中

Question

我正在寻找有关此布局的一些建议。我正在努力将播放按钮放在边框中间。到目前为止，我有以下代码，我只是在努力让 flexbox 定位播放按钮。

    function Tasks(props) {
  const { classes } = props;
  return (
    <div className={classes.root}>
      <Paper className={classes.paper}>
        <Grid container spacing={2}>
          <Grid item xs={12} sm container>
            <Grid item xs container direction="column" spacing={2}>
              <Grid item xs>
              <div className="name-label">
              Name
              </div>
              <Typography variant="h6" gutterBottom>
              Order cofee beans
              </Typography>
              <div className="form-divider"></div>
                <Typography variant="body2" color="textSecondary">
                  Process of Description
                </Typography>
              </Grid>
            </Grid>
            <Grid item>
              <Typography variant="subtitle">Workers Assigned</Typography>
              <Grid item xs={3}>
        <i class="far fa-play-circle"></i>
      </Grid>
              <Typography variant="h6" gutterBottom>
              0/25</Typography>
            </Grid>
          </Grid>
        </Grid>
      </Paper>
    </div>
  );
}

目前，我不确定网格是否是问题所在，或者我是否需要更好地构建我所拥有的内容，任何反馈都将不胜感激。我有它应该是什么样子的图像：

Image

Answer 1

我不会像那样使用 flex 来定位按钮。看起来你想要这样的东西：

const styles = theme => ({
  box1: {
    display: "flex",
    position: "relative",
    "& .playButton": {
      position: "absolute",
      top: "50%",
      transform: "translateY(-50%)"
    }
  }
});

const YourComponent = props => (
  <div>
    {...}
    <Grid item classes={{ root: props.classes.box1}}>
      <Typography variant="subtitle">Workers Assigned</Typography>
      <Grid item xs={3} className="playButton">
        <i class="far fa-play-circle"></i>
      </Grid>
      <Typography variant="h6" gutterBottom>0/25</Typography>
    </Grid>
    {...}
  </div>
);

YourComponent = withStyles(styles)(YourComponent);