样式总结

需求一：要在一个 <div> 元素中同时放置图片和文字，并使文字固定在图片的某个位置

方法：使用相对定位（Relative Positioning）

<div class="container">
  <img src="转存失败，建议直接上传图片文件 your-image-url.jpg" alt="Your Image转存失败，建议直接上传图片文件">
  <p class="overlay-text">Your Text Here</p>
</div>

.container {
  position: relative;
  display: inline-block; /* 使 div 根据内容大小调整 */
}
.overlay-text {
  position: absolute;
  top: 50%; /\* 距离图片顶部的距离 */
  left: 50%; /* 距离图片左侧的距离 */
  transform: translate(-50%, -50%); /* 使文字居中 */
  background-color: rgba(255, 255, 255, 0.7); /* 可选：添加背景色 */
  padding: 10px; /* 可选：添加内边距 \*/
}

.container 元素用于包含图片和文字。可以根据需要调整 .overlay-text 的 top、left 和其他样式属性，以实现所需的效果。使用相对定位时，文字的位置是相对于其正常位置移动的，而使用绝对定位时，文字的位置是相对于其最近的具有定位属性的父元素移动的。

需求二：让图片在line-block的盒子里水平居中

<div class="container"> 
    <img src="转存失败，建议直接上传图片文件 your-image-url.jpg" alt="Your Image转存失败，建议直接上传图片文件"> 
</div>

.container {
  text-align: center; /\* 将内容水平居中 */
  display: inline-block; /* 使盒子根据内容大小调整 \*/
}

将 .container 的 text-align 属性设置为 center，这会将盒子中的内容水平居中，包括其中的图片。 使用这种方法，盒子内的图片会在水平方向上居中显示。如果你希望在垂直方向上也进行居中，可以将盒子的高度设置为与图片高度相等，并使用垂直居中的方法（如使用 display: flex 和 align-items: center）。

需求三：让块级图片在line-block的盒子里水平居中

<div class="container">
  <img src="转存失败，建议直接上传图片文件 your-image-url.jpg" alt="Your Image转存失败，建议直接上传图片文件" class="centered-image">
</div>

.centered-image {
  display: block; /\* 将图片设置为块级元素 */
  margin: 0 auto; /* 设置左右外边距为自动，使图片在水平方向上居中 \*/
}

将图片的 display 属性设置为 block，使其成为块级元素。然后，通过设置左右外边距为自动，可以将图片在水平方向上居中。使用这种方法，块级图片将在 inline-block 盒子内水平居中显示。如果你还想在垂直方向上进行居中，可以将盒子的高度设置为与图片高度相等，并使用垂直居中的方法（如使用 display: flex 和 align-items: center）。