```markdown

图片与文字对齐的 HTML 代码

在网页设计中，经常需要将图片和文字进行对齐，以达到美观和整洁的效果。通过合理的 HTML 和 CSS 设置，可以实现图片与文字的对齐。本文将介绍几种常见的对齐方式及其实现方法。

1. 基本的水平对齐

最常见的图片与文字对齐方式是让它们在同一行内水平排列。可以使用 inline 或 inline-block 显示类型来实现。

示例代码：

```html

这是图片和文字水平对齐的示例。

```

解释：

• vertical-align: middle; 将图片的垂直对齐方式设置为与文字的中线对齐，确保图片与文字在垂直方向上的对齐。

2. 垂直对齐

当我们需要将图片与文字在垂直方向上进行对齐时，可以使用 vertical-align 属性来调整对齐方式。

示例代码：

```html

这是图片和文字垂直对齐的示例。

```

解释：

• vertical-align: top; 将图片的顶部与文字的顶部对齐，使得图片和文字在垂直方向上顶端对齐。

3. 使用 Flexbox 实现对齐

Flexbox 是一种更强大的布局方法，可以用来更灵活地控制图片与文字的对齐方式。通过 display: flex; 可以将父元素设为弹性容器，子元素可以通过 align-items 和 justify-content 属性来调整对齐。

示例代码：

```html

```

解释：

• display: flex; 将父元素 .container 设为弹性容器。
• align-items: center; 使得子元素（图片和文字）在垂直方向上居中对齐。

4. 使用 Grid 实现对齐

Grid 布局也可以实现图片和文字的精确对齐，尤其适合需要精细控制的布局。

示例代码：

```html

```

解释：

• display: grid; 使父元素变成 Grid 容器。
• grid-template-columns: auto 1fr; 定义两列，第一列为图片，第二列为文字。
• align-items: center; 使得图片和文字在垂直方向上居中对齐。

结论

通过以上几种方法，我们可以灵活地实现图片与文字的对齐。在实际开发中，可以根据需要选择合适的布局方式，如使用 inline、Flexbox 或 Grid 等不同的方法来实现对齐效果。