我如何在材料UI网格行中垂直对齐项目?

问题描述 投票:0回答:1

我正在使用Material UI的Grid组件来连续显示三个项目。我想垂直对齐项目到中心,但是我在进行这项工作时遇到了令人失望的挑战。显然,“ justifyContent:'居中”仅将项目水平居中。我发现这个

const styles = (theme) => ({
  root: {
    textAlign: "left",
    margin: theme.spacing(2),
    paddingBottom: theme.spacing(1),
    color: theme.color.secondary,
  },
  cardHeader: {
    paddingBottom: theme.spacing(0),
  },
  cardContent: {
    width: "100%",
    paddingBottom: theme.spacing(1),
  },
  rowBody: {
    width: "100%",
    flexWrap: "nowrap",
    alignItems: "center",
    justifyContent: 'center',
  },
...
      <CardContent className={classes.cardContent}>
        <Grid container className={classes.rowBody} spacing={1}>
          <Grid item>
            <img height="20" src={require('../../img/apple.svg')} alt="" />
          </Grid>
          <Grid item>
            {title}
          </Grid>
          <Grid item className={classes.infoIcon}>
            <InfoIcon />
          </Grid>
        </Grid>

产生以下内容。

enter image description here

如何在不水平对齐的情况下垂直对齐项目?

css reactjs grid material-ui vertical-alignment
1个回答
© www.soinside.com 2019 - 2024. All rights reserved.