Question

我在将我的反应形式与中心对齐方面遇到麻烦。

这是我的表格：

我正在使用reactjs材质用户界面

 <Grid item xs={12}>
          <Grid item xs={12}>

            <FormGroup noValidate autoComplete="on">
              <TextField
                label="SSN"
                type="number"
                className={classes.textField}
                name='ssn'
              />
            </FormGroup>

          </Grid>
      </Grid>

我正在尝试将表格对齐中心。

如果要查看整个组件，则该组件包含以下表格

import React from 'react';
import TextField from '@material-ui/core/TextField';
import Paper from '@material-ui/core/Paper';
import Grid from '@material-ui/core/Grid';
import Button from '@material-ui/core/Button';
import useStyles from '../src/styleMaker'
import { connect } from "react-redux";
import { FormGroup } from '@material-ui/core';
import { makeStyles } from '@material-ui/core/styles';


function App(props) {
  const useStyles = makeStyles(theme => ({
    container: {
      display: 'flex',
      flexWrap: 'wrap',
    },
    textField: {
      marginLeft: theme.spacing(1),
      marginRight: theme.spacing(1),
      width: 200,
    },
  }));
  const classes = useStyles();


  return (

    <React.Fragment>
    <div className={classes.container}>

        <Grid item xs={12}>
          <Grid item xs={12}>

            <FormGroup noValidate autoComplete="on">
              <TextField
                label="SSN"
                type="number"
                className={classes.textField}
                name='ssn'
              />
            </FormGroup>

          </Grid>
      </Grid>

    </div>

    </React.Fragment>

  );
}

export default App;

有人可以帮助我将此表格居中吗？我一整天都在尝试，但是我未能保持一致。

Answer 1

如果用于使表单水平居中，请在makeStyles

中添加以下样式

formGroup: {
  alignItems: 'center'
}

并将formGroup类名分配给<FormGroup>

<FormGroup className={classes.formGroup} noValidate autoComplete="on">
    <TextField
        label="SSN"
        type="number"
        className={classes.textField}
        name='ssn'
    />
</FormGroup>

这里是working form

如果要垂直和水平居中，最简单的方法是将某个根<div>放在绝对位置，并将width和height设置为100% 。这使<div>占据了整个屏幕。然后，您可以使用justify-content和align-items将表单居中。
```
container: {
  display: "flex",
  flexWrap: "wrap",
  position: "absolute",
  top: 0,
  left: 0,
  height: "100%",
  width: "100%",
  alignItems: "center"
}, 
```
这里是working form，该行在水平和垂直方向上居中对齐

ReactJS Material UI对齐表单字段中心

1 个答案: