Как центрировать кнопку воспроизведения с помощью 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>
  );
}

В настоящее время я не уверен, является ли проблема сеткой или мне нужно лучше структурировать то, что яесть, любая обратная связь будет высоко ценится.У меня есть изображение того, как оно должно выглядеть:

Изображение

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