Question

我正在尝试使用GRID API在label中使center在材料界面中水平放置。

能否请您告诉我我是如何实现的

 <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，但是它不起作用

E 预期h和hnnn的宽度应为水平居中。 当前它们保持对齐状态

Answer 1

在您将班级定义为abc的位置，删除项目并将其替换为容器，然后添加justify =“ center”

要在CSS中使用text-align：center

Answer 2

所有要做的就是向每个网格项添加容器属性，并应用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>

让我知道是否有帮助！

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

2 个答案: