在HTML中，要在图片
下方添加
文字，可以通过将
文字放在`<img>`标签后，并在
文字和图片之间使用适当的空白来实现。此外，为了更精确地控制
文字与图片的布局，可以使用CSS样式。
下面是一个简单的例子：
```html
<img src="image.jpg" alt="描述性
文字" style="display:block;" />
<p>这里是图片
下方的
文字描述。</p>
```
在这个例子中，`<img>`标签用于插入图片，`style="display:block;"`确保图片占满整个行宽，从而推动`<p>`标签中的
文字显示在图片
下方。使用`<p>`标签是为了保持内容的语义化，表明这部分
文字是一个段落。
此外，如果需要更精细的布局控制，可以使用CSS的定位属性，比如将图片设置为相对定位（`position: relative;`），然后将
文字设置为绝对定位（`position: absolute;`）并定位在图片
下方。
下面是一个使用CSS的例子：
```html
<div class="image-with-text">
<img src="image.jpg" alt="描述性
文字">
<p>这里是图片
下方的
文字描述。</p>
</div>
```
```css
.image-with-text {
position: relative;
}
.image-with-text p {
position: absolute;
bottom: 0;
width: 100%;
text-align: center;
background: rgba(255, 255, 255, 0.8); /* 添加半透明背景以增加可读性 */
}
```
在这个CSS示例中，`.image-with-text`类定义了一个相对定位的容器，用于包含图片和
文字。
文字使用了绝对定位并设置在容器的底部，这样无论图片大小如何，
文字都会显示在图片的
下方。
扫一扫
3万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
