如何在网格的材料UI中将标签水平中心转动?

Question

我正在尝试使用 GRID API 在材料 UI 中水平centerlabel。

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

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

Eh和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来做到这一点，请使用文本对齐：居中