reactjs 无法将图像/头像居中显示在卡片中

llycmphe  于 2023-02-03  发布在  React
关注(0)|答案(3)|浏览(190)

请帮帮忙,这让我发疯,感觉这应该是如此简单。
我似乎无法在我试图创建的Card组件中间Card一个图像/头像。
已尝试alignTextalignItemsalignContentjustify
我甚至试过了,效果很好,但显然现在已经过时了。

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>

  );
}

图像只停留在左边...

alen0pnh

alen0pnh1#

你能试试显示Flex:

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

axr492tv2#

还可以尝试添加lineHeight:0,字母间距:0到虚拟形象组件

n1bvdmb6

n1bvdmb63#

你只需要使用保证金:“自动”如下:
〈阿凡达alt=“特拉维斯·霍华德”src="/学生/gaby. svg”sx={{身高:“64 px”,宽度:“64 px”,边距:“自动”}} /〉

相关问题