Question

我需要将网格项目中的文本垂直居中，其中minHeigh属性设置为here's short codesandbox example of the problem i'm facing，justify，alignItems，似乎无法正常工作。

  <Grid container className={classes.root}>
    <Grid item xs={12}>
      <Grid
        container
        spacing={16}
        className={classes.demo}
        alignItems={alignItems}
        direction={direction}
        justify={justify}
      >
        {[0, 1, 2].map(value => (
          <Grid
            key={value}
            item
            style={{
              padding: "0 12px",
              minHeight: 48,
              borderStyle: "solid"
            }}
          >
            {`Cell ${value + 2}`}
          </Grid>
        ))}
      </Grid>
    </Grid>

当style={{ minHeight: 48 }}应用于<Grid item />网格项的子项没有对齐时，justify，alignItems对它没有任何影响。

Answer 1

您还需要为元素添加两个其他属性。

display: inline-flex;
align-items: center;

如果这是您期望的结果

      <Grid
        container
        spacing={16}
        className={classes.demo}
        alignItems={alignItems}
        direction={direction}
        justify={justify}
      >
        {[0, 1, 2].map(value => (
          <Grid
            key={value}
            item
            style={{
              display: "inline-flex", // <--
              alignItems: "center",   // <--
              padding: "0 12px",
              minHeight: 48,
              borderStyle: "solid"
            }}
          >
            <p>{`Cell ${value + 2}`}</p>
          </Grid>
        ))}
      </Grid>

Answer 2

试试vertical-align: middle，看看是否有效？或者，如果框是固定高度，您可以始终在其顶部添加边距。希望有所帮助！

Answer 3

这是你如何做到的。将文本换行到div中并使用alignItems： https://codesandbox.io/s/8nw8v9yv02

在网格元素内垂直居中文本

3 个答案: