材质UI网格对齐

Question

如何在材质UI中垂直对齐项目？ https://codesandbox.io/s/material-demo-forked-wrn9x

在这里我想将Start元素和顶部，Center元素置于中心，将End元素置于底部

我正在寻找最清晰，最好的解决方案

Answer 1

如果您使用网格，请执行以下操作：

     <Grid
        container
        direction="column"
        justify="center"
        alignItems="center"
        spacing={3}
        className={classes.container}
      >

你可以使用 MUI doc 的交互工具来玩，并获得你必须传递的道具，以便在未来创建你需要的所有布局。 https://material-ui.com/components/grid/#grid

Answer 2

以下代码将使三个网格 - 开始、居中和结束依次出现在一列中。此布局将在所有屏幕分辨率/断点上保持不变。

import React from 'react';
import { makeStyles } from '@material-ui/core/styles';
import Paper from '@material-ui/core/Paper';
import Grid from '@material-ui/core/Grid';

const useStyles = makeStyles((theme) => ({
  root: {
    flexGrow: 1,
  },
  paper: {
    padding: theme.spacing(2),
    textAlign: 'center',
    color: theme.palette.text.secondary,
    border: '2px solid #969292',
  }
 
}));

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

  return (
    <div className={classes.root}>
      <Grid>
        <Grid item xs={12}>
          <Paper className={classes.paper}>Start</Paper>
        </Grid>
        <Grid item item xs={12}>
          <Paper className={classes.paper}>Center</Paper>
        </Grid>
        <Grid item item xs={12}>
          <Paper className={classes.paper}>End</Paper>
        </Grid>
      </Grid>
    </div>
  );
}

此代码将生成如下布局：