CODEWITHSUNDEEP
reactjsmaterial-ui
lakerskill
lakerskill

Reputation: 1079

Material UI card will not center. React JS

Trying to use a card for the main part of my home page. However, nothing I will do will center the card, and I have tried putting justify, alignItems, alignContent, however, none of them seem to resolve the issue. I honestly have no idea what else to do to align this to the center. I don't see how it's even possible. Here is the code:

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

Upvotes: 17

Views: 59704

Answers (5)

Cassio Seffrin
Cassio Seffrin

Reputation: 8610

You can center the card using only MUI components. Here's how I accomplished it:

<Card>
  <CardHeader
    title="Check out the tutorial for the Djanog/React boilerplate used to make this site!"
    subheader={new Date().toDateString()}
  />
  <CardContent>
    <Grid container spacing={0} >
      <Grid container direction="row"
        alignItems="center"
        justifyContent="center"
      >
        <Box
          component="img"
          alt="auth"
          src={'/assets/illustrations/thks4buying.png'}
          sx={{
            maxWidth: 400,
            display: 'flex',
            justifyContent: "center"
          }}
        />
      </Grid>
    </Grid>
  </CardContent>
</Card>

Upvotes: 0

soma iyappan
soma iyappan

Reputation: 542

use this style

       const useStyles = makeStyles((theme) => ({
        cardstyle:{
        marginTop: theme.spacing(20),
        margin:'auto',
        flexDirection: 'column',
    },
}));

   <Card className={clasess.cardstyle}>
  // card content
</Card>

Upvotes: 3

ghchoi
ghchoi

Reputation: 5166

I do not know what is your problem while you are setting the width of cards 100%.

I cannot see the rendered view, however, I want to recommend one of minimal solution without <Grid>.

If I were you, I would simply try:

card: {
  'margin-left': '5%',
  width: "90%",
  ...

Upvotes: 3

Mark Fonte
Mark Fonte

Reputation: 301

Alternatively to switching to <Grid>, I put a <div> wrapper around the <CardMedia> element and used 

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

on the outer <div> tag to achieve the same result.

Upvotes: 16

Nadun
Nadun

Reputation: 7863

Use the Grid provided by 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>
}

hope this will help you. Use this: https://material-ui.com/layout/grid/ for more info

Upvotes: 22

Related Questions