如何让img元素下的span与图片对齐

为了让`<img>`元素下面的`<span>`标签与其水平对齐，你可以通过CSS样式来实现。这里有两个常见的方法：

1. **内联样式**:
如果你在HTML中可以直接设置样式，可以使用`display: inline-block;`使`<span>`元素成为块级元素，并且在同一行上与`<img>`对齐。示例：

   <img src="image.jpg" alt="...">
   <span style="display: inline-block;">这是文字描述</span>

2. **外部样式表**:
将这个样式添加到你的CSS文件中，选择所有的`img + span`组合，例如：

   img + span {
     display: inline-block;
     vertical-align: middle; /* 用于调整垂直对齐 */
   }

或者针对每个单独的`span`：

   .align-span {
     display: inline-block;
     vertical-align: middle;
   }
   
   img ~ .align-span { /* 使用通用选择器匹配紧跟在img后的span */
     .align-span {
       /* ... */
     }
   }

然后在HTML中应用该类名：

   <img src="image.jpg" alt="...">
   <span class="align-span">这是文字描述</span>

记得根据实际需求调整`vertical-align: middle;`这行，使其满足上下对齐的需求。