带有 IntputLabel 和 Input 的 Material UI 网格放置在水平行中：如何要求垂直对齐位于标签的中间？

Posted 2023-02-22

【中文标题】带有 IntputLabel 和 Input 的 Material UI 网格放置在水平行中：如何要求垂直对齐位于标签的中间？

【英文标题】：Material UI grid with IntputLabel and Input placed in horizontal row: how to ask vertical-align to be middle for the label?

【发布时间】：2021-08-26 10:09:14

【问题描述】：

我有非常标准的 React Material UI 网格，其中 InputLabel 和 Input 放置在水平行中。代码是：

const Container = (props) => <Grid container ...props />;
const Item = (props) => <Grid item xs=1 ...props />;
const ContainerItem = (props) => <Grid container item ...props />;

function App() 
  return (
    <div>
      <MuiThemeProvider theme=ucs_theme>
        <Container>
          <ContainerItem>
            <Item>
              <InputLabel htmlFor="m_gen_ref_serie">Serie</InputLabel>
            </Item>
            <Item>
              <Input type="text" id="m_gen_ref_serie" />
            </Item>
            <Item>
              <InputLabel htmlFor="m_gen_ref_serie2">Serie 2</InputLabel>
            </Item>
            <Item>
              <Input type="text" id="m_gen_ref_serie2" />
            </Item>
            <Item>
              <InputLabel htmlFor="m_gen_ref_serie3">Serie 3</InputLabel>
            </Item>
            <Item>
              <Input type="text" id="m_gen_ref_serie3" />
            </Item>
          </ContainerItem>
          <ContainerItem>
            <Item>
              <InputLabel htmlFor="m_gen_ref_serie">Serie</InputLabel>
            </Item>
            <Item>
              <Input type="text" id="m_gen_ref_serie" />
            </Item>
            <Item>
              <InputLabel htmlFor="m_gen_ref_serie2">Serie 2</InputLabel>
            </Item>
            <Item>
              <Input type="text" id="m_gen_ref_serie2" />
            </Item>
            <Item>
              <InputLabel htmlFor="m_gen_ref_serie3">Serie 3</InputLabel>
            </Item>
            <Item>
              <Input type="text" id="m_gen_ref_serie3" />
            </Item>
          </ContainerItem>
        </Container>
      </MuiThemeProvider>
    </div>
  );

完整的例子是可用的： https://codesandbox.io/s/react-final-form-material-ui-example-forked-f0ir9?file=/src/index.js

请注意，我的代码和框示例使用了一些主题，但问题不受此主题的影响（未解决）（至少受这种主题的影响）。

我有问题，我的问题是关于 InputLabel（呈现为 HTML 标签）文本的位置 - 它位于左上角。左边的位置没问题。 问题是我不喜欢将文本放在顶部（一些控制台条目有些奇怪的边距底部）。我想为此文本设置vertical-align="middle"。但是 InputLabel 没有这样的属性。如何在 Material UI 网格中为我的标签（标签的文本）实现vertical-align="middle" 效果？

也许我必须使用一些奇怪的中间组件，比如 Paper？

【参考方案1】：

您可以使用道具alignItems 编辑您的项目对齐方式

<Grid container justify='center|flexStart|flexEnd|...' alignItems='center|end|start|....' alignContent='center|....' ...props >

更多信息请查看文档here，您还可以在Grid item 上使用 CSS 规则来编辑展示位置