Выравнивание логотипа по центру с помощью Material-UI

Question

При попытке центрировать логотип в форме входа в систему с помощью Material-UI, все остальное, по-видимому, центрировано, за исключением логотипа, который обнимает левую сторону карты.

Я пытался добавить align="center" и justify="center" под тегом img, но оно все еще не перемещает изображение в центре карты. Я также попытался добавить "gridItem" alignItems:'center' под мои стили const

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
        }
    },
});

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

Я ожидаю, что логотип будет отцентрирован в моей форме "входа", которую я создал.

Answer 1

Вы используете flexbox, поэтому лучше использовать justifyContent: center; для родительского элемента, например.

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

Answer 2

Попробуйте text-align: центр для родительского элемента логотипа

HTML

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

CSS

.logo{
   text-align:center;
}