如何居中 Material-UI 网格组件

Question

This post has been resolved

你好，我在我的 React 应用程序中使用 Material-UI，我想将一个包含 Card 和另外两个 Grid 项目的 Grid 项目居中。这是相关代码。卡片确实出现在屏幕中间，但它们没有居中，这真的，真的让我很烦。

截图：

所需代码：

render() {
    return (
      <Grid container>
        <Grid item xs={12}>
          <Typography variant="h3" gutterBottom>
            My Projects
          </Typography>
        </Grid>
        <Grid item xs={6} justify="center">
          <Grid item xs={12}>
            <Card>
              <CardMedia
                component="img"
                height="140"
                image="https://github.com/dbarnes18/Portfolio/blob/master/assets/images/spotter.png?raw=true"
                alt="Spotter"
              />
              <CardContent>
                <Typography gutterBottom variant="h5" component="div">
                  Spotter
                </Typography>
                <Typography variant="body2" color="text.secondary">
                  Spotter is an easy-to-use Spotify music controller with
                  functioning room and voting systems.
                </Typography>
              </CardContent>
              <CardActions>
                <Button
                  size="small"
                  color="primary"
                  to="/project/spotter"
                  component={Link}
                >
                  Read More
                </Button>
              </CardActions>
            </Card>
          </Grid>
          <Grid item xs={12}>
            <br />
          </Grid>
          <Grid item xs={12}>
            <Card>
              <CardMedia
                component="img"
                height="140"
                image="https://github.com/dbarnes18/Portfolio/blob/master/assets/images/impulse.png?raw=true"
                alt="Spotter"
              />
              <CardContent>
                <Typography gutterBottom variant="h5" component="div">
                  Impulse
                </Typography>
                <Typography variant="body2" color="text.secondary">
                  Impulse is a macOS Virtual/Voice Assistant!{" "}
                  <i>Impulse is a little buggy and slow.</i>
                </Typography>
              </CardContent>
              <CardActions>
                <Button
                  size="small"
                  color="primary"
                  to="/project/impulse"
                  component={Link}
                >
                  Read More
                </Button>
              </CardActions>
            </Card>
          </Grid>
        </Grid>
      </Grid>
    );
  }

一些系统信息：

Google Chrome: 93.0.4577.82 (Official Build) (x86_64)
Revision: e3a25d9b9e2d0b728e045ec87c0aa4942aa46e4e-refs/branch-heads/4577@{#1237}
OS: macOS Version 10.15.7 (Build 19H1417)
JavaScript: V8 9.3.345.19

谢谢！

Answer 1

如你所说使用material-ui

只需为您的代码添加样式

material-ui v4.12.3

import { makeStyles } from "@material-ui/core/styles";

const useStyles = makeStyles(() => ({
  root: {
    display: "flex",
    justifyContent: "center",
    alignItem: "center"
  }
}));

并将其添加到您的网格

export default function App() {
  const classes = useStyles();
  return (
    <Grid container className={classes.root}>
           ....
)}

check out here

Answer 2

最简单的答案是给名字为 .container 的 div 并给它 width:100% 和 display:flex;justify-content:center;gap:20px 就是这样。

此处预览：https://codesandbox.io/s/vigilant-bird-ulpvm?file=/index.html

如何居中 Material-UI 网格组件

How to centre Material-UI Grid Components

javascript

css

reactjs

material-design

material-ui