在material-ui react应用程序中集中对齐网格答案

【问题标题】：Centrally align grids in material-ui react application在material-ui react应用程序中集中对齐网格
【发布时间】：2020-12-30 15:14:27
【问题描述】：

我想将 Grid 容器内的 Grid 项目水平居中。网格项目之间也需要一些间距。请在下面找到代码：

import React from "react";
import { makeStyles } from "@material-ui/core/styles";
import { Container, Grid } from "@material-ui/core";
import TextField from "@material-ui/core/TextField";

const useStyles = makeStyles((theme) => ({
  topContainer: {
    marginTop: theme.spacing(5),
  },
}));

export const AddContact = () => {
  const classes = useStyles();
  return (
    <Container fixed>
      <Grid
        container
        spacing={3}
        alignContent="center"
        alignItems="center"
        className={classes.topContainer}
      >
        <Grid item xs={4} style={{ border: "1px solid #ccc" }}>
          <TextField id="name" label="Name" style={{ width: "100%" }} />
          <TextField
            id="userName"
            label="User Name"
            style={{ width: "100%" }}
          />
        </Grid>
        <Grid item xs={4} style={{ border: "1px solid #ccc" }}>
          STEP 2
        </Grid>
      </Grid>
    </Container>
  );
};

目前的布局如下所示。

Grid 项目没有居中对齐，它们之间也没有间距。谁能帮我解决一下。

谢谢

【问题讨论】：

标签： css reactjs material-ui grid

【解决方案1】：

而不是将alignContent="center" 提供justify="space-around" 给<Grid> 容器元素。它会均匀地对齐项目，并根据可用空间将它们彼此分开。

import React from "react";
import { makeStyles } from "@material-ui/core/styles";
import { Container, Grid } from "@material-ui/core";
import TextField from "@material-ui/core/TextField";

const useStyles = makeStyles((theme) => ({
  topContainer: {
    marginTop: theme.spacing(5),
  },
}));

const AddContact = () => {
  const classes = useStyles();
  return (
    <Container fixed>
      <Grid
        container
        spacing={3}
        // alignContent="center"
        justify="space-around"
        alignItems="center"
        className={classes.topContainer}
      >
        <Grid item xs={4} style={{ border: "1px solid #ccc" }}>
          <TextField id="name" label="Name" style={{ width: "100%" }} />
          <TextField
            id="userName"
            label="User Name"
            style={{ width: "100%" }}
          />
        </Grid>
        <Grid item xs={4} style={{ border: "1px solid #ccc" }}>
          STEP 2
        </Grid>
      </Grid>
    </Container>
  );
};

export default AddContact

这里是工作沙箱链接：- https://codesandbox.io/s/material-demo-forked-0sf86

您也可以尝试在@material-ui:- https://material-ui.com/components/grid/#interactive 中使用网格对齐

【讨论】：

【解决方案2】：

试试这样的。

  <Grid
    container
    spacing={2}
  >
     <Grid item md={4} lg={4}> </Grid>
    <Grid item xs={12} sm={12} md={4} lg={4} style={{ border: "1px solid #ccc" }}>
      <TextField id="name" label="Name" style={{ width: "100%" }} />
      <TextField
        id="userName"
        label="User Name"
        style={{ width: "100%" }}
      />
    </Grid>
    <Grid item xs={12} sm={12} md={4} lg={4} style={{ border: "1px solid #ccc" }}>
      STEP 2
    </Grid>
  </Grid>

【讨论】：