material-ui网格内的中心组件答案

【问题标题】：Center component inside the material-ui gridmaterial-ui网格内的中心组件
【发布时间】：2019-08-17 06:00:09
【问题描述】：

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

我正在使用此代码 (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的示例。

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

【问题讨论】：

你试过删除“容器内”吗？或将alignItems 和justify 移至它？
@Maielo 我尝试了所有这些。我做了一个 CodeSandbox 来帮助可视化和测试codesandbox.io/embed/32o8j4wy2q
我会将margin: auto 添加到包含内容的内部div 中。我无法分叉您的演示，但将其添加到 CSS 似乎可以工作：div[class^='MuiGrid-item-'] > div { margin: auto; }
@Teknotica 我试过了，但它对我不起作用，我试着把它放在网格项目中，后来也把它放在容器中。您是否删除了一些参数？

标签： javascript css reactjs material-ui

【解决方案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>

【讨论】：

我得到了一个奇怪的结果。它可以工作，但随后应用程序崩溃并告诉我该调用没有过载。除了添加它，你还做了什么？
此方法可能会导致网格组件没有过载的错误，在这种情况下，您可以按照@Invaraid 的建议放置一个带有 alignItems="center" 的 Grid 容器。

【解决方案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>

【讨论】：

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

【解决方案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>

【讨论】：