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

问题描述

我有非常标准的 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 没有这样的属性。如何vertical-align="middle"在 Material UI 网格中为我的标签（标签的文本）实现效果？

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

标签： reactjsmaterial-uivertical-alignment

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

只需查看此处的文档以获取更多信息，您还可以使用 CSS 规则Grid item来编辑展示位置

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

问题描述

解决方案

推荐阅读