如何在网格中的材质UI中打开标签水平中心？

Question

我正在尝试使用GRID API在材质UI中使我的label水平center。

你能告诉我我是如何做到这一点的

https://codesandbox.io/s/007k3v472w

 <div className="search-container">
          <Grid container direction="row" spacing={24}>
            <Grid item xs={6} className="abc">
              <label>h</label>
            </Grid>
            <Grid item xs={6} className="pqr">
              <label>hnnn</label>
            </Grid>
          </Grid>
        </div>

https://material-ui.com/api/grid/我已经使用alignItems但它不起作用

预计h和hnnn应该是它们宽度的中心。目前他们是左对齐的

Answer 1

您只需要为每个网格项添加容器属性，并应用alignItem使其居中。

你的代码应该是这样的，

<Grid container direction="row" spacing={24}>
  <Grid item xs={6} 
    container
    direction="column"
    justify="center"
    alignItems="center"
    className="abc">
     <label>h</label>
  </Grid>
  <Grid item xs={6} 
    container
    direction="column"
    justify="center"
    alignItems="center"
    className="pqr">
     <label>hnnn</label>
  </Grid>
</Grid>

如果有帮助请告诉我！

Answer 2

你已经将你的类定义为abc删除项并将其替换为容器并添加justify =“center”

要使用CSS，请使用text-align：center