Css 将徽标与材质UI的中心对齐

尝试在我的登录表单中使用

材质UI

将徽标居中，其他所有内容似乎都居中，但卡左侧的徽标除外

我已经尝试在img标签下添加

align=“center”

和

justify=“center”

，但它仍然没有移动卡中央的图像。我还尝试在我的常量样式下添加一个“gridItem”

alignItems:“center”

const styles = theme => ({
    logo: {
        padding: "1rem",
        width: 300,
        [theme.breakpoints.down("sm")]: {
            width: 200,
        }
    },

    appName: {
        color: '#2979ff',
        [theme.breakpoints.down("sm")]: {
            fontSize: theme.typography.h5.fontSize
        }
    },
});

---

我希望徽标在我创建的“登录”表单中居中。

尝试文本对齐：徽标父元素的居中

HTML

---

您使用的是

flexbox

，因此最好使用

justifyContent:center在父元素上，如




<Grid container justify="center" alignItems="center">
    <Grid item>
    <Card>
    <Grid item> 
    <img className={classes.logo} alt="Portal Logo" src={Logo} align="center" />
</Grid>

<div class="logo">
  <img src="logo.png">
</div>   

.logo{
   text-align:center;
}