CODEWITHSUNDEEP
javascripthtmlcssmaterial-ui
lernbr
lernbr

Reputation: 471

Material UI Card content not centering

I'm working in Material UI, and have built a card where I want to center text horizontally and vertically. The inputs only center the text horizontally, it's still stuck to the top of the card and I'm not sure why. I've ready through Material UI docs and it should all work.

Code

<Card className={classes.root}>
  <CardContent className={classes.bigCard}>
    <Grid 
      align="center"
      container
      direction="column"
      justify="center"
      spacing={0}
      style={{ backgroundColor: 'teal' }}
    >
      <Grid item style={{ backgroundColor: 'yellow' }}>
        <h1>hey</h1>
      </Grid>
    </Grid>
  </CardContent>
</Card>

Upvotes: 1

Views: 6250

Answers (1)

Esther Cuan
Esther Cuan

Reputation: 377

Try this on your first outer Grid component: 

<Grid 
  direction="column"
  justify="center"
  alignItems="center"
  spacing={0}
  style={{ backgroundColor: 'teal' }}
 />

I am not sure why you have a Grid within a Grid but I believe that the Grid components have implemented the Flexible CSS model underneath. Which means they are using flexbox for their properties. The best way to center something with flexbox is : 

<ContainerDiv 
  styles={{
     display: 'flex', 
     alignItems: 'center', 
     justifyContent:'center'
}}>
  <Content> This will be centered </Content> 
</ContainerDiv>

This is a great read: https://css-tricks.com/snippets/css/a-guide-to-flexbox/ Material UI is based on it.

Hope this helpes your centering needs. :)

Upvotes: 1

Related Questions