Привет, сейчас я изучаю responsejs и пытаюсь поместить основной контейнер Grid в центр области просмотра, однако он всегда выравнивается по левой стороне от него.Я разрабатываю наладки с использованием материалов.Кроме того, следуя этому удивительному руководству CSS https://css-tricks.com/snippets/css/complete-guide-grid/, но независимо от того, что я сделал, ни одно из значений 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);