物料UI卡将不会居中。React JS

Question

尝试使用卡作为我主页的主要部分。但是，我将不会做任何事情将卡居中，并且我尝试放置了justify，alignItems，alignContent，但是它们似乎都无法解决问题。老实说，我不知道该怎么做才能使它与中心对齐。我什至不知道这怎么可能。这是代码：

import React from 'react';
import PropTypes from 'prop-types';
import { withStyles } from '@material-ui/core/styles';
import Card from '@material-ui/core/Card';
import CardActionArea from '@material-ui/core/CardActionArea';
import CardActions from '@material-ui/core/CardActions';
import CardContent from '@material-ui/core/CardContent';
import CardMedia from '@material-ui/core/CardMedia';
import Button from '@material-ui/core/Button';
import Typography from '@material-ui/core/Typography';
import reactImage from '../images/djangoreact.png'

const styles = {
  card: {
    width: "100%",
    backgroundColor: 'black',
    textAlign: 'center',
    justifyContent: 'center',
    alignContent: 'center',
    padding: '30px'
  },
  media: {
    height: 325,
    // textAlign: 'center',
    // justifyContent: 'center',
    // alignContent: 'center',
  },
  font: {
    color: 'white',
    // textAlign: 'center',
    // justifyContent: 'center',
    // alignContent: 'center',
  },
  header:{
    textAlign: 'center',
    justify: 'center',
    alignContent: 'center',
    width: '100%'


  }
};

function MediaCard(props) {
  const { classes } = props;
  return (
      <div className={classes.header} style={{
        justify: 'center',
        alignContent: 'center',
        alignItems: 'center'
      }}>
    <Card className={classes.card} style={{
        justify: 'center',
        alignContent: 'center',
        alignItems: 'center'
      }}>
      <CardActionArea>
        <CardMedia
          className={classes.media}
          image={reactImage}
          title="Contemplative Reptile"
        />
        <CardContent>
          <Typography gutterBottom variant="h5" component="h2" className={classes.font}>
            Welcome to the KB
          </Typography>
          <Typography component="p" className={classes.font}>
            Check out the tutorial for the Djanog/React boilerplate used to make this site!
          </Typography>
        </CardContent>
      </CardActionArea>
      <CardActions>
        <Button size="small" color="primary">
          Learn More
        </Button>
      </CardActions>
    </Card>
    </div>
  );
}

MediaCard.propTypes = {
  classes: PropTypes.object.isRequired,
};

export default withStyles(styles)(MediaCard);

Answer 1

或者切换到<Grid>，我<div>在<CardMedia>元素周围放了一个包装器并使用

style={{ display:'flex', justifyContent:'center' }}

在外<div>标签上实现相同的结果。

Answer 2

使用material-UI提供的网格

import Grid from '@material-ui/core/Grid';
// import like this

function MediaCard(props) {
 const { classes } = props;
 <Grid
  container
  spacing={0}
  direction="column"
  alignItems="center"
  justify="center"
  style={{ minHeight: '100vh' }}
 >

  <Grid item xs={3}>
    <Card>
      // card content
    </Card>
  </Grid>      
 </Grid>
}

希望这会帮助你。使用此：https：//material-ui.com/layout/grid/了解更多信息