Question

请帮助，这让我发疯，感觉应该很简单。

我似乎无法center在我要创建的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

您可以尝试显示flex吗？

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

无法将图片/头像放在Card中

1 个答案: