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éé.
2 réponses
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>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;
}
De nouvelles questions
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.