html怎么在图片旁边打字
时间: 2024-09-18 22:17:01 浏览: 47
HTML中要在图片旁添加文字描述,可以使用`<figure>`和`<figcaption>`标签,或者是简单的`<p>`元素配合`<img>`标签。以下是两种常见的方法:
1. 使用`<figure>`和`<figcaption>`组合:
```html
<figure>
<img src="image.jpg" alt="图片描述">
<figcaption>这是一段关于图片的文字</figcaption>
</figure>
```
`<figcaption>`会在图片下方显示文本,通常用于提供图说。
2. 如果你想让文字和图片并排展示,可以使用`<div>`和CSS调整样式:
```html
<div class="image-text">
<img src="image.jpg" alt="图片描述">
<p>这是一段关于图片的文字</p>
</div>
<style>
.image-text {
display: flex;
align-items: center; /* 图片和文字对齐 */
}
</style>
```
在这里,`.image-text` 的 CSS 设置使图片和文字在同一行显示。
阅读全文