时间戳

首页 > 解决方案 > 如何在网格中的材质 UI 中转动标签水平中心？

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

问题描述

我正在尝试使用 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应在其宽度的水平中心。 目前它们是左对齐的

标签： reactjsreact-reduxmaterial-ui

解决方案

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

让我知道是否有帮助！

推荐阅读