我正在使用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>
产生以下内容。
如何在不水平对齐的情况下垂直对齐项目?