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

我需要在设置了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 />子项时，如果未对齐，则对正，alignItems对其没有任何影响。

最佳答案

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

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>

关于javascript - 在网格元素内垂直居中放置文本，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/50906581/