如何将文本放置在图片右下角？现有布局文本对齐异常求助

要实现图片居中、文本位于图片右下角且对齐div左侧的效果，你需要调整CSS的定位逻辑，原代码中display:flex的设置会导致文本脱离预期布局，以下是修正后的实现代码：

修正后的CSS #

/*Photos*/
.Cameraphoto {
  position: relative;
  text-align: center;
  /* 让容器宽度适配图片，确保绝对定位的文本以图片为基准定位 */
  display: inline-block;
}

.Cameraphoto p {
  position: absolute;
  bottom: 0;
  left: 0; /* 文本对齐到div左侧 */
  margin: 0; /* 清除p标签默认外边距，避免布局偏移 */
  text-align: left; /* 文本内容左对齐 */
  padding: 5px; /* 可选：增加间距优化视觉效果 */
}

对应的HTML #

<!-- photo -->
<div class="Cameraphoto">
  <img src="imgss/picture.jpeg">
  <p>
    Paragraph
  </p>
</div>

关键调整说明 #

• display: inline-block：让.Cameraphoto容器宽度匹配图片宽度，避免绝对定位的文本以整个页面宽度为基准。
• position: absolute：将文本从正常文档流中脱离，相对于父容器定位，结合bottom:0和left:0可将文本固定在图片左下角（若需右下角，将left:0改为right:0即可）。

内容的提问来源于stack exchange，提问作者Mustafa Levent Oz