最稳方案是用 display: flex 布局，设父容器 display: flex 和 align-items: center，图片加 max-width: 100% 和 height: auto，文字用 inline 元素或 inline-block。
用 display: flex 最稳，别碰 float
图片和文字并排对齐最可靠的方式是把容器设为 flex 布局。老式 float 容易塌陷、需要清浮动，现代项目里基本不用了。flex 天然支持垂直居中、响应式缩放、顺序控制，且浏览器兼容性已覆盖所有主流版本（IE10+ 需加 display: -ms-flexbox，但一般可忽略）。
常见错误现象：文字紧贴图片顶部、底部悬空、换行后错位——基本都是没设 align-items 或容器高度不一致导致的。
- 给包裹图片和文字的父元素（比如
<div class="item">）加上 <code>display: flex和align-items: center - 图片建议设
max-width: 100%和height: auto，避免拉伸变形 - 文字部分用
<p></p>或<span></span>即可，无需额外浮动或定位 - 把文字容器改成
<span></span>，或加样式display: inline-block -
vertical-align的取值优先用middle、top、bottom，慎用baseline（受字体影响大） - 注意：该属性对父容器高度无影响，若父容器高度由内容撑开，仍可能出现视觉错位
- 默认加
flex-wrap: wrap，让子项在空间不足时自动换行 - 用媒体查询限制最小宽度：
@media (max-width: 768px) { .item { flex-direction: column; } } - 图片加
width: 100%（非max-width），确保在 column 模式下占满宽度 - 纯展示类图文并排，一律用
flex或语义化标签（如<figure><img><figcaption></figcaption></figure>） - 如果真要用表格，仅限真实数据表格，且必须配
scope属性
vertical-align 只对 inline/inline-block 元素有效
如果图和文都写在一行里（比如 <img><span>文字</span>），想用 vertical-align 对齐，必须确保两者都是 inline 或 inline-block 级别。默认 <img> 是 inline，但 <p></p><div class="aritcle_card flexRow artxards">
<div class="artcardd flexRow">
<a class="aritcle_card_img" rel="nofollow" href="/xiazai/skill9263" title="Html2md"><img
src="https://img.php.cn/upload/skill/000/000/081/179249945220127.jpg" alt="Html2md" onerror="this.onerror='';this.src='/static/lhimages/moren/morentu.png'" ></a>
<div class="aritcle_card_info flexColumn">
<a rel="nofollow" href="/xiazai/skill9263" title="Html2md" class="overflowclass">Html2md</a>
<p class="overflowclass">使用 Readability + Turndown 将 HTML 页面转换为干净的、Agent 友好的 Markdown。去除导航栏、广告、页脚、Cookie 横幅、社交按钮等干扰元素。支持 URL...</p>
</div>
<a rel="nofollow" href="/xiazai/skill9263" title="Html2md" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span>
</a>
</div>
</div> 是 block，直接套用会失效。
典型错误：写了 vertical-align: middle 没反应——八成是文字容器用了 <p></p> 或没设 display: inline-block。
响应式场景下，flex-wrap 和媒体查询要配合用
手机屏宽度不够时，并排会挤成一团甚至溢出。不能只靠 flex，得主动控制换行逻辑。
常见问题：PC 上正常，手机上图片被压缩、文字折行混乱、右侧留白过大。
不要用表格（<table>）模拟布局
<p>虽然 <code><table><tr>
<td>@@##@@</td>
<td>文字</td>
</tr></table> 能强行并排，但语义错误、可访问性差、维护成本高。屏幕阅读器会误读为数据表，SEO 也不友好。
容易踩的坑：合并单元格逻辑复杂后，CSS 很难统一控制间距；移动端 table-layout: fixed 容易导致文字截断。
<img> 没设 height 或 aspect-ratio，会导致 flex 容器高度跳变。建议要么预设宽高比（aspect-ratio: 4/3），要么用 loading="lazy" 配合骨架屏。
