Question

我试图理解Material UI的网格系统并在React.js上使用它，但是到目前为止，这有点令人困惑。无论视口大小如何，我都想将微调加载器和文本居中。我可以将第一个加载程序微调器放置在中间，但是文本似乎总是像在这段代码中一样，破坏对齐或下沉到底部。我认为我必须使用xs = {2}之类的属性，但是不确定它们是如何工作的？我可以在这方面寻求帮助吗？

这是我的代码：

const useStyles = makeStyles(theme =>
  createStyles({
    root: {
      marginTop: theme.spacing(6)
    },
    spinner: {
      color: 'rgba(255, 255, 255, 0.2)',
      minHeight: '100vh'
    }
  })
);

<Grid container spacing={0} direction="column" alignItems="center" justify="center" className={classes.spinner}>
      <Grid item>
        <FontAwesomeIcon icon="circle-notch" spin className={classes.spinner} size="5x" />
      </Grid>
      <Grid item>
        <Translate contentKey={labelKey}>Waiting for show to start</Translate>
      </Grid>
    </Grid>
  );

Answer 1

答案很短，但是可以解决

<Grid item align="center">

Answer 2

我将flexbox切换为@sidecus。这个网格太夸张了。

root: {
    position: 'fixed',
    top: ' 50%',
    left: '50%',
    transform: 'translate(-50%, -50%)'
  },
  spinner: {
    color: 'rgba(255, 255, 255, 0.2)'
  },
  text: {
    textAlign: 'center'
  }

材质UI网格居中

2 个答案: