Reputation: 368
Trying to center a logo in my log in form with Material-UI
, everything else appears to be centered exception of the logo which is hugging the left side of the card.
I've tried adding align="center"
and justify="center"
under the img tag but it still is not moving the image in the center of the card. I've also tried adding a "gridItem" alignItems:'center'
under my const styles
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>
I am expecting the logo to be centered in my my "login" form that I've created.
Upvotes: 1
Views: 1139
Reputation: 3162
You are using flexbox
so better to use justifyContent: center;
on parent element like .
<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>
Upvotes: 1
Reputation: 1531
Try text-align:center for the parent element of logo
HTML
<div class="logo">
<img src="logo.png">
</div>
CSS
.logo{
text-align:center;
}
Upvotes: 0