Question

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

我试图将其下方的头像和版式组件放置在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>
  );
}

Answer 1

如果我对您的理解正确，那么您有一些不必要的额外课程。

您可以使用以下代码实现垂直对齐：

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

Answer 2

在外部Grid组件上，给它一个height:'inherit'的css类，并添加道具alignItems="center"

Answer 3

尝试一下纸：{ 显示：“ flex”， alignItems：'中心' }

Answer 4

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

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

如何使用材质ui将容器/项目放置在复杂的网格中

4 个答案: