```markdown

如何让文字和图片在一行显示

在网页设计和排版中，有时我们希望文字和图片在同一行显示。为了实现这一效果，通常可以使用HTML和CSS来调整布局。本文将介绍几种常见的方法来让文字和图片在一行显示。

方法一：使用display: inline-block;

示例代码：

```html

```

解释：

• display: inline-block; 使得图片和文字都变成内联块级元素，能够在同一行内显示。
• vertical-align: middle; 用于确保图片和文字垂直对齐。

方法二：使用flexbox布局

示例代码：

```html

```

解释：

• display: flex; 使得容器变为弹性布局。
• align-items: center; 用来让图片和文字垂直居中对齐。
• justify-content: center; 使内容水平居中。

方法三：使用float布局

示例代码：

```html

```

解释：

• float: left; 使图片向左浮动，从而与文字在同一行显示。
• margin-right: 10px; 为图片和文字之间添加间距。
• 使用 overflow: hidden; 处理容器的布局问题。

方法四：使用grid布局

示例代码：

```html

```

解释：

• display: grid; 使容器变为网格布局。
• grid-template-columns: auto auto; 将容器分为两列，图片和文字分别占据一列。
• align-items: center; 确保图片和文字在垂直方向上居中对齐。

总结

以上方法都能实现文字和图片在一行显示。具体使用哪种方法取决于你的布局需求和对浏览器兼容性的要求。对于简单的布局，inline-block 或 float 方法就能满足需求；如果需要更复杂的响应式布局，可以考虑使用 flexbox 或 grid。