我想使用相同的卡片并使它们居中对齐,我搜索并尝试了一些解决方案,但所有这些解决方案都只对齐组件网格,而不是组件内容本身(我需要它们与边界和它们本身的距离相等)。
我正在使用此代码( https://codesandbox.io/embed/32o8j4wy2q ):
<Grid
container
spacing={0}
direction="column"
alignItems="center"
justify="center"
style={{ minHeight: '80vh' }}>
<Grid container item xs={12} spacing={8}>
<Grid item xs={6}>
<Card />
</Grid>
<Grid item xs={6}>
<Card />
</Grid>
<Grid item xs={6}>
<Card />
</Grid>
<Grid item xs={6}>
<Card />
</Grid>
</Grid>
</Grid>
卡片代码无关紧要,但我只是复制了 material-ui 的示例一。
另外,如果我将来决定添加或删除一些卡片,我该如何使用 flexboxes(或其他工具)自动对齐?
原文由 Pedro Vieira 发布,翻译遵循 CC BY-SA 4.0 许可协议
我通过在 JSX 代码中添加
align="center"
来解决它,这意味着align-items: center
在 CSS 中的解释,如此 处 所述。代码是这样完成的: