En essayant de centrer un logo dans mon formulaire de connexion avec Material-UI, tout le reste semble être centré à l'exception du logo qui étreint le côté gauche de la carte.

J'ai essayé d'ajouter align="center" et justify="center" sous la balise img mais cela ne déplace toujours pas l'image au centre de la carte. J'ai également essayé d'ajouter un "gridItem" alignItems:'center' sous mes styles 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>

Je m'attends à ce que le logo soit centré dans mon formulaire de "connexion" que j'ai créé.

1
eneooo 8 nov. 2019 à 02:19

2 réponses

Meilleure réponse

Vous utilisez flexbox donc il vaut mieux utiliser justifyContent: center; sur l'élément parent comme.

<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>
1
Kumar 8 nov. 2019 à 03:15

Essayez l'alignement du texte: centre pour l'élément parent du logo

HTML

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

CSS

.logo{
   text-align:center;
}
0
Par Tha 8 nov. 2019 à 00:06