Material UI中Avatar组件对齐失效问题及解决方案

在使用Material UI的Avatar组件时，无法实现Avatar的居中对齐效果。尝试过在CardHeader中设置justifyContent: "center"，同时给Avatar添加alignSelf: "center"属性，但均无效。

相关代码如下：

export const CallerInformationCard = (props) => {
  return (
    <Card {...props}>
      <CardHeader
        sx={{
          display: "flex",
          justifyContent: "center",
        }}
        avatar={
          <Avatar
            alt="John Snow"
            sx={{ height: "180px", width: "180px", alignSelf: "center" }}
            src={jonSnow}
          />
        }
      />
      <Typography variant="h5" sx={{ textAlign: "center" }}>
        Jon Snow
      </Typography>
      <Typography subtitle1="h1" sx={{ textAlign: "center" }}>
        (412) 891-2312
      </Typography>
      <CardContent>
        <Stack>
          <Property label="Address" value="123 Elm Street" />
          <Property label="Checking Account Number" value="12352314" />
          <Property label="Savings Account Number" value="1234567890" />
          <Property label="Investment Account Number" value="9876543210" />
          <Property label="Customer Since" value="March, 2015" />
        </Stack>
      </CardContent>
    </Card>
  )
}

解决方案 #

修改CardHeader的样式，添加flexDirection: "column"即可实现Avatar居中对齐：

<CardHeader 
   sx={{
       flexDirection: "column"
   }}
...
/>

内容的提问来源于stack exchange，提问作者Paul Blart