Reactjs

Question

你好，我现在正在学习 reactjs 并尝试将主 Grid 容器放在视口的中心，但是，它总是从它的左侧对齐。我正在使用 material ui 在 reactjs 上进行开发。此外，按照这个很棒的 css 教程 https://css-tricks.com/snippets/css/complete-guide-grid/ 但无论我做了什么 none 任何对齐属性的 center 值都有效。

import React, { Component } from 'react';
import { withStyles } from '@material-ui/styles';
import ReactHtmlParser from 'react-html-parser';
import axios from 'axios';
import Button from '@material-ui/core/Button';
import KeyboardBackspaceIcon from '@material-ui/icons/KeyboardBackspace';
import Box from '@material-ui/core/Box';
import Grid from '@material-ui/core/Grid';
import Paper from '@material-ui/core/Paper';
import { Redirect } from 'react-router-dom';
import moment from 'moment-timezone';

const styles = {
    mainGrid: {
        marginTop: "25px",
        marginBottom: "100px",
        width: "50%",
        height: "auto",
        borderRadius: "25",
        boxShadow: "0",
        paddingLeft: "50px",
        paddingRight: "50px",
        paddingBottom: "50px",
        paddingTop: "10px"
    }
};

class JobDescriptionComponent extends Component {

    constructor(props) {
        super(props);
        this.state = {
            redirect: false,
        };
    }

    render() {

        return (
            <Grid container>
                { this.state && this.state.jobListing &&
                    <Grid container direction="column" spacing={1} style={styles.mainGrid}>
                        <Grid item>
                            <Button size="small" style={{textTransform: "lowercase", backgroundColor: "white"}} onClick={this.goBackToJobList.bind(this)}>
                                <KeyboardBackspaceIcon />
                                back to job list
                            </Button>
                        </Grid>
                        <Grid item style={{fontSize: "18px", marginTop: "10px"}}>
                            Posted on {moment(this.state.jobListing.posted_time).format('MMM DD YYYY')}
                        </Grid>
                        <Grid item style={{fontSize: "25px", marginTop: "10px"}}>
                            Amazon
                        </Grid>
                        <Grid item style={{fontSize: "25px", fontWeight: "bold", textDecoration: "underline"}}>
                            Software Engineer
                        </Grid>
                        <Grid item style={{marginTop: "10px"}}>
                            <Button variant="outlined" color="inherit" style={{marginRight: "10px", textTransform: "lowercase"}} size="small" clickable>Python</Button>
                            <Button variant="outlined" color="inherit" style={{marginRight: "10px", textTransform: "lowercase"}} size="small" clickable>Java</Button>
                        </Grid>
                        <Grid item style={{marginTop: "20px"}}>
                            Wirecutter is seeking a full-stack Senior Software Engineer to work collaboratively building digital
                            products and features that share our research and expertise, helping our millions of readers make informed buying decisions.
                        </Grid>
                        <Grid container justify="center" style={{marginTop: "20px"}}>
                            <Button variant="outlined" color="primary" style={{textTransform: "none"}} size="large">Apply for this job</Button>
                        </Grid>
                    </Grid>
                }
            </Grid>
        )
    }
}

export default withStyles(styles)(JobDescriptionComponent);

Answer 1

您可以在 Grid 组件中使用属性 justify="center"。

<Grid container>
 { this.state && this.state.jobListing &&
  <Grid container direction="column" spacing={1} style={styles.mainGrid} justify="center">

Reactjs - 如何在视口中心显示网格

Reactjs - How to display a Grid on center of the viewport

javascript

css

material-ui