css如何实现图片中间设置文字

CSS 可以通过结合`<img>`标签、`text-align`属性以及绝对定位或者浮动元素来实现图片中间放置文字。下面是一些常见的方法：

1. **使用`<figure>`和`figcaption`**:
将图片放在 `<figure>` 元素内，然后在其外部添加一个 `figcaption` 子元素，居中显示文本。例如：

   <figure>
     <img src="image.jpg" alt="描述">
     <figcaption style="text-align: center;">这是图片下方的文字</figcaption>
   </figure>

2. **绝对定位**:
给图片和文字都设置宽度，然后将文字绝对定位在图片中央。例如：

   <div class="container">
     <img src="image.jpg" alt="描述">
     <p class="caption">图片中间的文字</p>
   </div>
   CSS:
   .container {
     position: relative;
   }
   .caption {
     position: absolute;
     top: 50%;
     left: 50%;
     transform: translate(-50%, -50%);
   }

3. **浮动布局**:
如果你想让图片和文字在同一行水平排列，可以使用浮动技术。给图片`float`属性使其左对齐，并调整文字的位置。例如：

   <div class="container">
     <img src="image.jpg" alt="描述" float="left">
     <p>图片中间的文字</p>
   </div>
   CSS:
   .container {
     overflow: auto;
   }