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

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 />网格项的子项未对齐、对齐、对齐项，对其没有任何影响。

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>