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

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

De nouvelles questions

6 Le code ne revient pas à son état d'origine après l'exécution lorsque nous supprimons la case à cocher?
3 Pourquoi justify-content: center échoue-t-il lorsque je rétrécis la largeur de la fenêtre?
4 Impossible d'attribuer plusieurs éléments HTML dans la fonction .css ()
4 Puis-je ajouter des attributs facultatifs à un élément dans React?
4 Essayer d'obtenir mon <ul> pour remplir le fond de mon conteneur en utilisant Flexbox
3 Javascript comment agrandir le texte de 10%
2 Comment ajouter une bordure aux derniers composants angulaires (list-group-item) générés avec * ngFor
3 Comment colorier l'une des 100 cases avec un bouton dans un modal en utilisant javascript
3 Ajout de texte sous chaque colonne 4X4 en utilisant CSS GRID
6 Centrer un texte à l'intérieur d'un élément rotatif
Toutes les questions sur css >

css

CSS (Cascading Style Sheets) est un langage de feuille de style de représentation utilisé pour décrire l'apparence et la mise en forme des documents HTML (HyperText Markup Language), XML (Extensible Markup Language) et des éléments SVG, y compris (mais sans s'y limiter) les couleurs, la mise en page, les polices, et animations. Il décrit également comment les éléments doivent être affichés à l'écran, sur papier, dans un discours ou sur d'autres supports.

css...