```markdown
图片和文字怎么在一行 HTML 中显示
在 HTML 中，有时候我们希望将图片和文字放在同一行上，这可以通过几种不同的方式来实现。下面介绍几种常见的方法。
方法 1: 使用 inline 或 inline-block 样式
示例：
```html
这里是文字
```
解释：
display: inline-block;可以让图片和文字显示在同一行。vertical-align: middle;可以调整图片和文字在垂直方向上的对齐，使它们更加居中。
方法 2: 使用 Flexbox
Flexbox 是一种强大的布局方式，可以非常容易地将图片和文字对齐在一行上。
示例：
```html
这里是文字
```
解释：
display: flex;将容器转换为 Flexbox 布局。align-items: center;可以确保图片和文字在垂直方向上居中对齐。margin-right: 10px;为图片和文字之间添加间距。
方法 3: 使用 float 属性
float 属性可以让元素向左或向右浮动，使得其他内容围绕它。
示例：
```html
这里是文字
```
解释：
float: left;使图片向左浮动，文字会围绕图片显示。margin-right: 10px;为图片和文字之间添加间距，防止文字紧贴图片。
方法 4: 使用 grid 布局
CSS Grid 布局也可以实现图片和文字在同一行显示。
示例：
```html
这里是文字
```
解释：
display: grid;将容器设置为 Grid 布局。grid-template-columns: auto 1fr;定义两列，第一列宽度自动适应图片，第二列占据剩余空间。align-items: center;确保图片和文字在垂直方向居中对齐。
总结
以上是几种常见的实现图片和文字在一行显示的方法。根据具体的布局需求，可以选择适合的方式。inline 和 inline-block 方法适用于简单的布局，而 Flexbox 和 Grid 布局则提供了更强大的控制能力，适合更复杂的布局需求。
```