正文

在HTML中，我们可以使用<img>标签来插入图片，然后通过CSS或者JavaScript来添加文字说明。以下是一个简单的示例：

优站号
优站号 V管理员 /0 评论 /31 阅读
0313
欧意国内注册
<!DOCTYPE html>
<html>
<head>
    <style>
        .caption {
            position: relative;
            text-align: center;
            color: #008CBA;
        }
        .centered {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
        }
    </style>
</head>
<body>
<h2>如何在图片中添加文字说明</h2>
<p>在HTML中，我们可以使用<img>标签来插入图片，然后通过CSS或者JavaScript来添加文字说明，以下是一个简单的示例：</p>
<div class="caption">
  <img src="your_image.jpg" alt="Your Image" class="centered">
  <p class="centered">这是一张美丽的风景照片</p>
</div>
</body>
</html>

在这个示例中，我们首先创建了一个<div>元素，并给它添加了一个类名caption，我们在<div>内部创建了一个<img>元素，设置了它的src属性为图片的URL，alt属性为图片的描述，我们在<div>内部创建了一个<p>元素，用于显示文字说明。

我们还使用了CSS来调整文字的位置和样式。.caption类将文字定位在图片的中心，.centered类将文字的位置设置为相对于其父元素的50%的顶部和左边，然后使用transform: translate(-50%, -50%)来将文字的位置移动到图片的中心。