如何使用材质 ui 在复杂网格中将容器/项目居中答案

【问题标题】：How to center a container/item in a complex grid with material ui如何使用材质 ui 在复杂网格中将容器/项目居中
【发布时间】：2020-05-01 07:44:13
【问题描述】：

https://codesandbox.io/s/wonderful-fog-yvvjp

我试图让其下方的 Avatar 和 Typography 组件完美地位于 Paper 组件左侧部分的中心。在使用 DevTools 检查后，似乎 Avatar 和 Typography 所在的项目/容器组件没有完全占用它们的父容器空间。我尝试将其高度设置为 100%。我也尝试将 flexGrow 设置为 1。我将如何实现 Avatar Typography 组件的垂直和水平居中？

import React from "react";
import "./styles.css";
import {
  Container,
  Typography,
  Paper,
  makeStyles,
  Avatar,
  Grid
} from "@material-ui/core";

const useStyles = makeStyles(theme => ({
  root: {
    flexGrow: 1
  },
  paper: {
    height: "15vh"
  },
  avatarSection: {
    height: '100%'
  }
}));

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

  return (
    <Container className={classes.root}>
      <Paper className={classes.paper}>
        <Grid container direction="row">
          <Grid
            item
            container
            direction="column"
            justify="center"
            alignItems="center"
            className={classes.avatarSection}
            xs={3}
          >
            <Avatar />
            <Typography variant="subtitle2">Benjamin world</Typography>
          </Grid>
          <Grid item xs={9}>
            <Typography variant="body1">
              Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur
              quam lorem, malesuada sed sapien non.
            </Typography>
          </Grid>
        </Grid>
      </Paper>
    </Container>
  );
}

【问题讨论】：

你能发一张你想要的结果的截图吗？

标签： reactjs material-ui

【解决方案1】：

您只需将网格容器的高度设置为 100%。

        <Grid style={{ height: "100%" }} container direction="row">

【讨论】：

【解决方案2】：

试试这个纸： { 显示：'弹性'， alignItems：'中心' }

【讨论】：

【解决方案3】：

如果我理解正确的话，你有一些不必要的额外课程。

您可以通过以下代码实现垂直对齐：

const useStyles = makeStyles(theme => ({
  paper: {
    height: "15vh"
  },
}));

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

  return (
    <Container>
      <Paper>
        <Grid className={classes.paper} container alignItems="center" direction="row">
          <Grid
            item
            container
            direction="column"
            justify="center"
            alignItems="center"
            xs={3}
          >
            <Avatar />
            <Typography variant="subtitle2">Benjamin world</Typography>
          </Grid>
          <Grid item xs={9}>
            <Typography variant="body1">
              Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur
              quam lorem, malesuada sed sapien non.
            </Typography>
          </Grid>
        </Grid>
      </Paper>
    </Container>
  );
}

【讨论】：

【解决方案4】：

在你的外部 Grid 组件上，给它一个带有 height:'inherit' 的 css 类同时添加 prop alignItems="center"

【讨论】：