material-ui 网格内的中心组件

新手上路,请多包涵

我想使用相同的卡片并使它们居中对齐,我搜索并尝试了一些解决方案,但所有这些解决方案都只对齐组件网格,而不是组件内容本身(我需要它们与边界和它们本身的距离相等)。

在此处输入图像描述在此处输入图像描述

我正在使用此代码( 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 许可协议

阅读 532
2 个回答

我通过在 JSX 代码中添加 align="center" 来解决它,这意味着 align-items: center 在 CSS 中的解释,如此 所述。

代码是这样完成的:

   <Fragment>
    <Grid
      container
      spacing={24}
      justify="center"
      style={{ minHeight: '100vh', maxWidth: '100%' }}
      >
     <Grid item xs={3} align="center">
        <Card />
      </Grid>
      <Grid item xs={3} align="center">
        <Card />
      </Grid>
      <Grid item xs={3} align="center">
        <Card />
      </Grid>
      <Grid item xs={3} align="center">
        <Card />
      </Grid>
    </Grid>
  </Fragment>

原文由 Pedro Vieira 发布,翻译遵循 CC BY-SA 4.0 许可协议

align 网格中的道具不再存在。我们可以组成 GridBox

 <Grid container>
  <Grid xs={8} item>
    <Box
      height="100%"
      display="flex"
      justifyContent="center"
      flexDirection="column"
    >
      Content with smaller height
    </Box>
  </Grid>
  <Grid xs={4} item>
    Content with bigger height
  </Grid>
</Grid>

原文由 Morlo Mbakop 发布,翻译遵循 CC BY-SA 4.0 许可协议

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题