CODEWITHSUNDEEP
cssreactjsmaterial-ui
eneooo
eneooo

Reputation: 368

Aligning logo to center with Material-UI

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

Answers (2)

Ram kumar
Ram kumar

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

Par Tha
Par Tha

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

Related Questions