CODEWITHSUNDEEP
cssreactjsmaterial-ui
Lawrence Ferguson
Lawrence Ferguson

Reputation: 321

Can not center image/avatar within Card

Please help, its driving me crazy, feels like this should be so simple.

I can't seem to center an image/avatar in the middle of a Card component I'm trying to create.

Tried alignText ,alignItems, alignContent, justify.

I even tried which worked but is obviously now obsolete...

import React from 'react';
import { makeStyles } from '@material-ui/core/styles';
import Card from '@material-ui/core/Card';
import CardContent from '@material-ui/core/CardContent';
import Typography from '@material-ui/core/Typography';
import Avatar from '@material-ui/core/Avatar';
import Dankirk from '../assets/img/dankirk.jpg'

const useStyles = makeStyles({
  card: {
    width: "100%",
    minHeight: "150px",
    borderRadius: "0px",
  },
  title: {
    fontSize: 14,
    textAlign: "center"
  },
  pos: {
    marginBottom: 12,
  },
  avatar: {
    margin: 10,
    width: 120,
    height: 120,
  },
});

export default function SimpleCard() {
  const classes = useStyles();

  return (

    <div className={classes.root}>
      <div className={classes.container}>
    <Card className={classes.card}>
      <CardContent style={{justifyContent: 'center'}}>
        <Typography className={classes.title} color="textSecondary" gutterBottom>
          Test
        </Typography>
            <Avatar alt="avatarimage" src={name} className={classes.avatar} />
      </CardContent>
    </Card>
    </div>
    </div>

  );
}

Image just stays to the left...

Upvotes: 3

Views: 13075

Answers (3)

Raghav Sharma
Raghav Sharma

Reputation: 1100

You just have to use margin: "auto" like this:

<Avatar alt="Travis Howard" src="/students/gaby.svg" sx={{ height: "64px", width: "64px", margin: "auto" }} />

Upvotes: 2

Yevhen Lysenko
Yevhen Lysenko

Reputation: 1

Also try do add lineHeight: 0, letterSpacing: 0 to Avatar component

Upvotes: 0

hussam
hussam

Reputation: 314

Can you try display flex:

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

Upvotes: 16

Related Questions