将组件置于 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（或其他工具）进行自动对齐？

- Pedro Vieira

---

你尝试过移除“inside container”吗？或者将alignItems和justify移到里面去？ - Maielo

@Maielo 我尝试了所有这些。我创建了一个 CodeSandbox 来帮助可视化和测试 https://codesandbox.io/embed/32o8j4wy2q - Pedro Vieira

我会在包裹内容的内部 div 上添加 margin: auto。我无法 fork 您的演示，但是将此添加到 CSS 中似乎可以起作用：div[class^='MuiGrid-item-'] > div { margin: auto; } - Teknotica

@Teknotica 我试过了，但对我没用，我试着将它放置在网格项中，稍后又放置在容器中。你是否移除了某些参数？ - Pedro Vieira

Answer 1

我通过在JSX代码中添加align="center"来解决了它，这意味着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>

- Pedro Vieira

---

我对这个得到了一个奇怪的结果。它可以工作，但是应用程序崩溃并告诉我调用没有超载。除了添加那个之外，你还做了其他事情吗？ - Domagoj Vuković

该方法可能会导致一个错误，即网格组件没有重载的情况。在这种情况下，您可以像 @Invaraid 建议的那样放置一个 alignItems="center" 的 Grid 容器。 - Pedro Vieira

Answer 2

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>

- Morlo Mbakop

Answer 3

被接受的答案对我无效，我收到了一个错误提示，指出 grid 没有 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>

- S Bradshaw

---

我认为使用Box组件也可以处理它：https://material-ui.com/system/flexbox/ - Hugo

Answer 4

你可以试试这个：

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

sx={{ textAlign: "center" }} 用于在React应用程序中将居中对齐样式应用于特定的JSX组件或HTML元素。

- Bilal Akbar

Answer 5

将网格项内容对齐到其中心

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

- Rahul.S