Centering Avatar component inside Card component

Question

Good day,

I am attempting to center my <Avatar> components using Material UI with React inside of the <Card> components. What is the best way to accomplish this? It's very crammed looking at the moment.

I have tried setting the avatar class to display flex and justifyContent to center, but this has not proved successful.

This is the code for the entire page which includes the Material UI components I'm using.

import React, { useEffect } from "react";
import Spinner from "../components/layout/Spinner";
import PropTypes from "prop-types";
import { connect } from "react-redux";
import { getProfiles } from "../actions/profile";
import Navbar from "../components/dashboard/Navbar";
import {
  Card,
  CardActions,
  CardContent,
  CssBaseline,
  Grid,
  Typography,
  Button,
  makeStyles,
  Container,
  Avatar
} from "@material-ui/core";

const useStyles = makeStyles(theme => ({
  cardGrid: {
    paddingTop: theme.spacing(4),
    paddingBottom: theme.spacing(4)
  },
  card: {
    height: "100%",
    display: "flex",
    flexDirection: "column"
  },
  cardContent: {
    flexGrow: 1
  },
  profileHeader: {
    textAlign: "center"
  },
  avatar: {
    width: theme.spacing(7),
    height: theme.spacing(7)
  }
}));

const Profiles = ({ getProfiles, profile: { profiles, loading } }) => {
  const classes = useStyles();

  useEffect(() => {
    getProfiles();
  }, [getProfiles]);

  return (
    <>
      {loading ? (
        <Spinner />
      ) : (
        <React.Fragment>
          <CssBaseline />
          <Navbar />
          <main>
            <Container className={classes.cardGrid} maxWidth="md">
              <Typography className={classes.profileHeader} variant="h2">
                Profiles
              </Typography>
              <Grid container spacing={4}>
                {profiles.map(profile => (
                  <Grid item key={profile._id} xs={12} sm={6} md={4}>
                    <Card className={classes.card}>
                      <Avatar
                        alt="Profile Image"
                        src={profile.user.avatar}
                        className={classes.avatar}
                      />
                      <CardContent className={classes.cardContent}>
                        <Typography gutterBottom variant="h5" component="h2">
                          Goals completed {profile.goalsCompleted}
                        </Typography>
                        <Typography>{profile.aboutme}</Typography>
                      </CardContent>
                      <CardActions>
                        <Button size="small" color="primary">
                          View
                        </Button>
                      </CardActions>
                    </Card>
                  </Grid>
                ))}
              </Grid>
            </Container>
          </main>
        </React.Fragment>
      )}
    </>
  );
};

Profiles.propTypes = {
  getProfiles: PropTypes.func.isRequired
};

const mapStateToProps = state => ({
  profile: state.profile
});

export default connect(mapStateToProps, { getProfiles })(Profiles);

Answer 1

The first option if you want to move all the content into center then need to apply alignItems: 'center' to card instead of avatar, like the following:

card: {
   height: '100%',
   display: 'flex',
   flexDirection: 'column',
   alignItems: 'center'
},

This will result moving all the content to center inside the <Card> component.

The second is to create a <Container> around the <Avatar> as the following first:

<Card className={classes.card}>
   <Container className={classes.center}>
      <Avatar alt="Profile Image"
              src={'#'}
              className={classes.avatar} />
   </Container>
   { /* rest of the code */ }
</Card>

Then apply the following style:

center: {
   display: 'flex',
   alignItems: 'center',
   flexDirection: 'column'
}

Result from the second possible solution:

If you ask me, I would go with the second option, that looks better.

I hope that helps!