如何在网格项目中居中对齐 Material-UI“芯片”？答案

【问题标题】：How do I center align a Material-UI "Chip" within a Grid item?如何在网格项目中居中对齐 Material-UI“芯片”？
【发布时间】：2021-06-11 14:24:38
【问题描述】：

只是试图在网格项目中垂直居中芯片。

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>

图中有三个<Box><Box/>，当对话框有消息预览时，你可以看到第一个chip略高于中心。我觉得我已经用 Material-UI 的文档在阳光下尝试了一切。还尝试了 JSX 样式中的绝对和相对定位，但这不起作用。任何帮助表示赞赏！

【问题讨论】：

标签： javascript css reactjs material-ui

【解决方案1】：

尝试像这样在芯片外部添加一个 div：

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

并在您的样式或 css 上添加以下内容：

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

【讨论】：