material-ui 网格内的中心组件

IT技术 javascript css reactjs material-ui
2021-05-08 21:25:46

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

在此处输入图片说明 在此处输入图片说明

我正在使用此代码（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（或其他工具）来自动对齐？

3个回答

我加入soved它align="center"在JSX代码手段align-items: center在CSS的解释在这里。

代码是这样完成的：

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

接受的答案对我不起作用，我收到一个错误，表明带有 Align props的网格没有过载。我改为将我想要在 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>

该alignprops无法与电网存在了。我们可以用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>
其它你可能感兴趣的问题
上一篇Ender 3 V2 挤出机变热 下一篇Jest 中“beforeEach”全局的目的是什么？