材质-UI栅格内的居中组件 [英] Center component inside the material-ui grid

问题描述

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

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

卡片代码无关紧要，但我只是复制了资料-UI的示例资料。

另外，如果我决定将来添加或删除某些卡，如何使用弹性框(或其他工具)自动对齐？

推荐答案

我解决了这个问题，在jsx代码中添加了align="center"，意思是align-items: center，如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>

这篇关于材质-UI栅格内的居中组件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！