怎么让同一框内span的文字和img对齐

要让同一行内的`<span>`文字和`<img>`元素水平对齐，你可以使用CSS中的文本对齐（text-align）属性以及浮动（float）或Flexbox布局。以下是几种常见的方法：

1. **使用`text-align`属性**:
如果它们都在同一直线上，可以给包含这两个元素的容器设置`text-align`为`center`或`right`。例如：

   <div style="text-align:center;">
     <img src="..." alt="" /> <!-- 图片 -->
     <span>文字内容</span>
   </div>

2. **使用`display: inline-block`和`vertical-align`**:
给图片和span都设置`display: inline-block`，然后通过调整`vertical-align`使其底部对齐：

   <div style="display:flex;align-items:flex-end;">
     <img src="..." alt="" style="vertical-align:bottom;" /> <!-- 图片 -->
     <span>文字内容</span>
   </div>

3. **利用浮动（Float）**:
先将图片设为浮动，然后清除浮动影响span元素：

   <style>
     img { float:left; }
     span { display:block; clear:both; }
   </style>
   <div>
     <img src="..." alt="" /> <!-- 图片 -->
     <span>文字内容</span>
   </div>

4. **使用Flexbox布局**:
如果你熟悉Flexbox，可以直接创建一个Flex容器，并将它们作为子项放在一起：

   <div style="display:flex;">
     <img src="..." alt="" /> <!-- 图片 -->
     <span>文字内容</span>
   </div>