Question

我想使用相同的卡片并使它们居中对齐，我搜索并尝试了一些解决方案，但所有解决方案都仅对齐组件网格，而不对齐组件内容本身（我需要它们与边界等距，并且与自己。）

我正在使用以下代码（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>

卡代码无关紧要，但我只是复制了材料用户界面的示例。

此外，如果将来我决定添加或移除某些卡，该如何使用弹性框（或其他工具）自动对齐？

Answer 1

接受的答案对我不起作用，我收到一条错误消息，表明使用Align道具的网格没有过载。相反，我将要居中对齐的组件包装在justify="center"和alignItems="center"的Grid容器中。

因此在OPs示例中，它看起来像：

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

Answer 2

我通过在JSX代码中添加align="center"（如here所述在CSS中表示align-items: center）来保存它。

代码是这样完成的：

  <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>

Answer 3

网格不再存在 align 道具。我们可以用 Grid 和 Box

组合

<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>

material-ui网格内部的中心组件

3 个答案: