javascript - 如何使 cardHeader 组件中的头像元素居中？

Question

我正在为前端元素使用 Material UI，并且我有显示数据的卡片。我想在中心的卡片中显示一个头像。我正在使用卡片标题插入我的头像，但无法将其居中。我尝试将 alignContent 和 textAlign 设置为在媒体样式类中居中，但这没有帮助。

我应该怎么做才能实现居中对齐？让我知道我是否应该使用 cardHeader 以外的东西。

<CardHeader
     className={classes.media}
     avatar={<Avatar alt="Alias" src={alias1} className={classes.small} />}
   />

更新:我通过在“小”类中将 marginLeft 和 marginRight 指定为“自动”来获得结果。但接受的答案也有效。

Answer 1

CardHeader 需要一个 title，它以 flex: 1 1 auto 样式呈现，无论您是否提供 >title 是否支持。这就是阻止您在 media 类样式中使用 justifyContent 的原因。

有几种方法可以解决这个问题，但如果您不使用其他 CardHeader Prop ，我会简单地将其替换为 Box 或 Grid 。

const {Card, Box, Avatar, CardContent, Typography, makeStyles } = MaterialUI

const useStyles = makeStyles({
  root: {
    backgroundColor: "#eeeeee",
    maxWidth: 400
  }
});

function MyCard() {
  const classes = useStyles();

  return (
    <Card className={classes.root}>
      <Box display="flex" justifyContent="center" alignItems="center" p={2}>
        <Avatar alt="Alias" className={classes.small} />
      </Box>
      <CardContent>
        <Typography variant="body2">
          Lorem ipsum dolor sit amet consectetur adipisicing elit. Impedit modi
          delectus laudantium neque perspiciatis voluptate aut aliquam tempore
          atque nobis.
        </Typography>
      </CardContent>
    </Card>
  );
}

ReactDOM.render(<MyCard />, document.getElementById('root'))

<script src="https://unpkg.com/react@latest/umd/react.development.js" crossorigin="anonymous"></script>
<script src="https://unpkg.com/react-dom@latest/umd/react-dom.development.js"></script>
<script src="https://unpkg.com/@material-ui/core@latest/umd/material-ui.development.js" crossorigin="anonymous"></script>
<script src="https://unpkg.com/babel-standalone@latest/babel.min.js" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap" />
<div id="root"></div>