Alignement du logo au centre avec Material-UI

Question

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éé.

css reactjs material-ui

1

eneooo 8 nov. 2019 à 02:19

Answer 1

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

Answer 2

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

Alignement du logo au centre avec Material-UI

2 réponses

De nouvelles questions

css