如何使用Material-UI和CSS实现标题在黑盒内顶部水平对齐

解决方案 #

你现有代码的问题是注释掉的h1如果直接放在Grid容器内，会被列方向的Grid布局识别为第一个子元素，自然占用垂直高度，无法实现悬浮在容器顶部的效果。优化方案如下：

• 给外层的容器设置相对定位，作为标题的定位参照
• 标题使用绝对定位脱离文档流，就不会占用额外垂直空间，同时可以固定在顶部居中位置

修改后的代码示例：

<Box m={3} sx={{ position: 'relative' }}>
  {/* 新增顶部居中标题，脱离文档流不占垂直空间 */}
  <h1 
    sx={{
      position: 'absolute',
      top: 0,
      left: '50%',
      transform: 'translateX(-50%)',
      margin: 0,
      color: '#fff', // 可根据实际需求调整文字颜色
      fontSize: '24px' // 可自定义字号
    }}
  >
    Hello John Joseph Jones
  </h1>
  <Grid
    container
    direction="column"
    className={classes.container}
    spacing={2}
  >
    <Grid item xs={6} className={classes.pictureSection}>
      <div className={classes.imageSection}>
        <img
          src="https://picsum.photos/id/237/200/300"
          className={classes.img}
          alt="no pic"
        />{" "}
        <p className={classes.precinctNo}>PR&nbsp; 4838390</p>
        <p className={classes.controlNo}>555555</p>
      </div>
    </Grid>

    <Grid item xs={6} className={classes.nameAddressSection}>
      <Box className={classes.fontText}>John Joseph Jones</Box>

      <Box mt={1} className={classes.fontText}>
        26 South Hawthorne Drive Tonawanda, NY 14150
      </Box>

      <Box mt={1}>
        <QRCode size={80} value={"4234432"} />
      </Box>
    </Grid>
  </Grid>
</Box>

如果你使用的是旧版本MUI的makeStyles方案，把标题的样式写到对应的classes里即可，效果一致。

内容的提问来源于stack exchange，提问作者Joseph