如何将#credit1置于50vw宽的item1右下居中、#credit2置于左下居中？

要让信用文本分别居中显示在对应图片的右下角和左下角，推荐先调整HTML结构（让每组图片和文本形成独立单元），再通过CSS定位完成需求：

1. 调整HTML结构 #

将每个图片和对应的信用文本包裹在独立容器中，便于精准控制定位：

<div class="the-images"> 
  <div class="image-group">
    <img id="item1" class="item" src="" alt="Item 1"> 
    <div id="credit1">CREDIT1</div>
  </div>
  <div class="image-group">
    <img id="item2" class="item" src="" alt="Item 2"> 
    <div id="credit2">CREDIT2</div>
  </div>
</div>

2. 编写CSS样式 #

利用相对定位+绝对定位的组合，配合文本对齐属性实现效果：

/* 图片组容器设为相对定位，作为内部绝对定位元素的参考基准 */
.image-group {
  position: relative;
  display: inline-block;
}

/* 确保图片宽度为50vw，消除行内元素默认间距 */
.item {
  width: 50vw;
  display: block;
  height: auto; /* 保持图片比例 */
}

/* 信用文本通用样式，可根据需求调整 */
#credit1, #credit2 {
  position: absolute;
  text-align: center;
  padding: 4px 8px;
  background: rgba(0, 0, 0, 0.7);
  color: #fff;
  border-radius: 4px;
  bottom: 8px; /* 距离图片底部的间距 */
}

/* 定位credit1到item1的右下角 */
#credit1 {
  right: 8px; /* 距离图片右侧的间距 */
}

/* 定位credit2到item2的左下角 */
#credit2 {
  left: 8px; /* 距离图片左侧的间距 */
}

效果说明 #

• .image-group的relative定位让内部的信用文本可以基于图片容器定位，不会影响其他元素布局。
• text-align: center保证信用文本在自身块内居中显示，结合bottom/right/left属性，实现文本块精准落在图片的目标角落。
• 如果不需要额外间距，可将bottom、right/left的值设为0，让文本块紧贴图片边缘。

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