css - 无法在卡片中居中图像/头像

Question

请帮忙，快把我逼疯了，感觉应该这么简单。

我似乎无法在我尝试创建的 Card 组件中将图像/头像居中。

尝试了 alignText、alignItems、alignContent、justify。

我什至尝试过哪个有效，但显然现在已经过时了......

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>

  );
}

图像只是停留在左边...

Answer 1

你能试试 display flex:

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