html图片与文字对齐并在同一行

要在HTML中将图片和文字对齐并显示在同一行，可以使用CSS来实现。以下是一个简单的示例：

### HTML 结构

<div class="container">
    <img src="path/to/image.jpg" alt="描述性文本" class="image">
    <span class="text">这是文字</span>
</div>

### CSS 样式

.container {
    display: flex;
    align-items: center; /* 垂直居中对齐 */
}

.image {
    margin-right: 10px; /* 图片和文字之间的间距 */
}

.text {
    font-size: 16px; /* 文字大小 */
}

### 解释
1. **容器 (`<div class="container">`)**:
- `display: flex;`: 将容器设置为弹性盒模型，使子元素（图片和文字）在同一条线上排列。
- `align-items: center;`: 垂直居中对齐子元素。

2. **图片 (`<img class="image">`)**:
- `margin-right: 10px;`: 在图片和文字之间添加一些间距。

3. **文字 (`<span class="text">`)**:
- `font-size: 16px;`: 设置文字的字体大小。

通过这种方式，你可以轻松地将图片和文字对齐并显示在同一行。如果你有更多具体的需求或样式要求，可以根据需要调整CSS属性。