在 material-ui React 应用程序中集中对齐网格

Question

我想在 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>
  );
};

目前的布局如下所示。

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

谢谢

Answer 1

尝试这样的事情。

  <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>

Answer 2

而不是给 alignContent="center" 提供 justify="space-around" 给 <Grid> 容器元素。它会均匀对齐项目，并根据可用 space.

将它们彼此分开

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

这是工作沙箱 link:- https://codesandbox.io/s/material-demo-forked-0sf86

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

在 material-ui React 应用程序中集中对齐网格

Centrally align grids in material-ui react application

css

grid

reactjs

material-ui