CSS：固定尺寸div中图片与标签的对齐问题

嘿，我明白你现在遇到的问题——固定的bottom值确实会在图片尺寸变化时搞砸标签的位置！咱们来一步步修复它：

问题根源 #

你给标签设置了固定的bottom: 252px，这个值不会随着图片高度的变化而调整，所以当图片变小时，标签就会偏离到错误的位置。

最优修复方案（自适应容器高度） #

这个方案让容器根据图片尺寸自动调整高度，同时保证标签始终在图片正上方，还能保留你想要的间距：

<div class="mx-4" style="box-sizing: border-box; position: relative; width: 30rem;">
  <!-- 标签：水平居中 + 固定在容器顶部，和图片保持间距 -->
  <label style="white-space:normal !important; 
                position: absolute; 
                top: 0; 
                left: 50%; 
                transform: translateX(-50%); 
                background-color:#2a2d34;
                color:#fff;
                display: inline-block; 
                padding: 0.25em 0.4em;
                font-size: 125%;
                font-weight: 700;
                line-height: 1; 
                text-align: center;
                white-space: nowrap;
                vertical-align: baseline; 
                border-radius: 0.25rem;
                margin-bottom: 0.5rem;">{{myfileName}}</label>
  
  <!-- 图片：自适应容器宽度，按比例缩放不变形 -->
  <img style="display: block; 
              width: 100%; 
              height: auto;
              margin-top: 2.5rem;" <!-- 这里的margin-top要大于等于标签的高度+间距，避免图片被标签遮挡 -->
       class="imgClass contain" 
       [src]="mySrc" 
       alt="Test Image" />
</div>

关键修改点解释 #

1. 容器去掉固定高度：删掉height:37rem，让容器根据图片高度自动撑开，避免图片小时出现大量空白区域
2. 标签水平居中+相对顶部定位：用left:50% + transform: translateX(-50%)实现完美水平居中，top:0让标签固定在容器顶部，再通过margin-bottom保留和图片的间距
3. 图片自适应缩放：width:100% + height:auto确保图片按比例缩放不变形，同时撑满容器宽度；margin-top要设置成大于等于标签的总高度（内容+内边距），防止图片被标签遮挡

如果必须保留固定容器高度（37rem） #

要是你的场景要求容器必须固定高度，那可以用弹性布局让图片在容器内居中，再通过动态计算定位标签：

<div class="mx-4" style="box-sizing: border-box; 
                          position: relative; 
                          height: 37rem; 
                          width: 30rem;
                          display: flex;
                          align-items: center;
                          justify-content: center;">
  <label style="white-space:normal !important; 
                position: absolute; 
                left: 50%; 
                transform: translateX(-50%); 
                background-color:#2a2d34;
                color:#fff;
                display: inline-block; 
                padding: 0.25em 0.4em;
                font-size: 125%;
                font-weight: 700;
                line-height: 1; 
                text-align: center;
                white-space: nowrap;
                vertical-align: baseline; 
                border-radius: 0.25rem;
                bottom: calc(50% + 图片高度/2 + 0.5rem);"> <!-- 替换成实际图片高度的一半，比如图片高20rem就写10rem -->
    {{myfileName}}
  </label>
  
  <img style="max-width: 100%; 
              max-height: 100%; 
              object-fit: contain;" 
       class="imgClass" 
       [src]="mySrc" 
       alt="Test Image" />
</div>

不过这个方案需要你知道图片的大致高度，灵活性不如第一种，所以优先推荐自适应容器的方案哦！

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