material-ui 網格內的中心組件

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>

卡代碼無關緊要，但我只是復制了 material-ui 的示例之一。

另外，如果我決定在未來添加或移除一些卡片，我該如何使用 flexboxes（或其他工具）來自動對齊？

Answer 1

我通過在 JSX 代碼中添加align="center"來解決它，這意味着align-items: center在 CSS 中解釋為here 。

代碼是這樣完成的：

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

接受的答案對我不起作用，我收到一個錯誤，表明帶有 Align 道具的網格沒有過載。 我改為將我想要居中對齊的組件包裝在 Grid 容器中，使用justify="center"和alignItems="center" 。

所以在 OP 示例中，它看起來像：

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

Answer 4

將網格項目內容對齊到它的中心

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