How do I center align a Material-UI "Chip" within a Grid item?

user_14039739 0
Viewed 960

Just trying to vertically center a chip within a grid item.

const styles = {
  root: {
borderRadius: 8,
height: 80,
boxShadow: "0 2px 10px 0 rgba(88,133,196,0.05)",
marginBottom: 10,
display: "flex",
alignItems: "center",
"&:hover": {
  cursor: "grab",
},
  },
};

      <Box
        onClick={() => this.handleClick(this.props.conversation)}
        className={classes.root} 
      >
        <BadgeAvatar
          photoUrl={otherUser.photoUrl}
          username={otherUser.username}
          online={otherUser.online}
          sidebar={true}
        />
        <Grid container justify="center">

          <Grid item xs={10} justify="center">
            <ChatContent conversation={this.props.conversation} />
          </Grid>

          <Grid item xs={2}  >
            <Chip label="23" size="small" color="primary" className={classes.chip} />
          </Grid>

        </Grid>
      </Box>

enter image description here

In the picture, there are three<Box><Box/>'s and you can see the first chip is slightly higher than the center when the conversation box has a message preview. I feel like I've tried everything under the sun with Material-UI's docs. Also tried absolute and relative positioning in the JSX styling, but that won't work. Any help is appreciated!

material-ui reactjs css javascript
1 Answers

Try adding a div outside chip like this:

<Grid item xs={2}  >
  <div className="chipContainer">
    <Chip label="23" size="small" color="primary" className={classes.chip} />
  <div>
</Grid>

and on your style or css add the following:

.chipContainer{
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}
user_152885600
Related