时间戳

首页 > 解决方案 > Material UI Grid Item 是否需要在位置属性上定义断点？（在我的情况下为 textAlign / text-align）

reactjs - Material UI Grid Item 是否需要在位置属性上定义断点？（在我的情况下为 textAlign / text-align）

问题描述

对此问题的扩展：如何在 Material UI 网格项目中水平居中项目？

我注意到了这种行为，但在查看材质 UI 的网格文档时无法找到相应的解释

本质上，我在一个网格项目中有一个按钮，该按钮位于我试图居中的网格容器中。看起来像这样

      <Grid container>
    <Grid item xs={9}>
    </Grid>
    <Grid item xs={3}>
          <Grid item xs={12} style={{textAlign: "center"}}>
            <Button>Create a Post</Button>
          </Grid>
    </Grid>
  </Grid>

上面的代码之所以运行，是因为我提供了 xs={12} 的断点，否则它将拒绝使元素居中。

我的问题是，这是我在尝试居中元素时提供断点的要求吗？

标签： reactjsmaterial-ui

解决方案

首先，给网格内的元素一个fullWidth 属性，否则它不会按您的意愿显示。
默认情况下，您的元素不在网格内居中，所以是的，您需要提供一些样式。无需在另一个网格内制作网格。如果您在沙盒中分叉代码，我可以提供更多帮助。

<Grid item xs={3}  style={{//center here, using flexbox or something else}}>          
   <Button fullWidth>Create a Post</Button>          
</Grid>

推荐阅读