HTML5中禁用align属性，应使用CSS；vertical-align用于图文同行垂直对齐，默认baseline导致图片下压，middle最常用；flex布局更稳定可靠；text-align须作用于父元素才有效。
别用 align 属性，它在 HTML5 中已废弃，浏览器可能忽略或行为不一致——直接上 CSS。
vertical-align 用于图文同行时的垂直对齐
当 <img alt="HTML怎么设置图片与文字对齐_网页对齐方式【技巧】" > 和文字写在同一行（比如 <p>文字<img src="x" alt="HTML怎么设置图片与文字对齐_网页对齐方式【技巧】" >继续文字</p>），默认按基线（baseline）对齐，图片下方会空出字母“g”“y”的下伸空间，看起来像被往下压了一截。
- 加
vertical-align: middle;最常用，视觉协调；top和bottom也可用，但不如middle稳定 - 必须确保文字部分也是 inline 或 inline-block 级别，否则
vertical-align不生效 - 如果整段都这样对齐，建议统一写 CSS：
img { vertical-align: middle; }，而不是每个<img alt="HTML怎么设置图片与文字对齐_网页对齐方式【技巧】" >都加 style - 注意：HTML 换行符和空格也会造成可见间隙，删掉标签间的空白字符或设父容器
font-size: 0;再给文字单独设字号可消除
display: flex 是图文并排对齐最稳方案
想让图片靠左、文字靠右，或整体居中、垂直居中，display: flex 几乎零容错。老式 float 容易塌陷、需清浮动，现代项目里没必要碰。
- 给包裹图文的容器（如
<div> 或 <code><p></p><div class="aritcle_card flexRow"> <div class="artcardd flexRow"> <a class="aritcle_card_img" href="/xiazai/skill11445" title="使用华数设计生成高保真HTML原型、演示文稿、动画和设计评审"><img src="https://img.php.cn/upload/skill/001/246/273/6adaf20e695c2374.jpg" alt="使用华数设计生成高保真HTML原型、演示文稿、动画和设计评审" ></a> <div class="aritcle_card_info flexColumn"> <a href="/xiazai/skill11445" title="使用华数设计生成高保真HTML原型、演示文稿、动画和设计评审">使用华数设计生成高保真HTML原型、演示文稿、动画和设计评审</a> <p>使用经过文档化的设计技能，从真实的品牌或项目背景中生成HTML原生原型、幻灯片、动态演示、可视化图表和评审流程。</p> </div> <a href="/xiazai/skill11445" title="使用华数设计生成高保真HTML原型、演示文稿、动画和设计评审" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span> </a> </div> </div>）加display: flex;和align-items: center; - 图片记得加
max-width: 100%; height: auto;，防拉伸变形 - 文字部分用
<span></span>或直接写文本即可，不用额外设display - 如果图文在
<p></p>里直接混写，flex会让每个子节点（包括换行符）变成独立 item，建议把图文包进一个<div> 再 flex <h3>text-align: center 只对父容器生效，且只管行内内容</h3> <p>很多人给 <code><img alt="HTML怎么设置图片与文字对齐_网页对齐方式【技巧】" >自己加text-align: center，完全没用——这个属性必须写在**父元素**上，而且只影响它的 inline 子元素。立即学习“前端免费学习笔记（深入）”；
- 正确写法：
<p style="text-align: center"><img src="x" alt="HTML怎么设置图片与文字对齐_网页对齐方式【技巧】" > 这段文字也会居中</p> - 如果父容器是
<div>，里面只有 <code><img alt="HTML怎么设置图片与文字对齐_网页对齐方式【技巧】" >，它默认是 inline，能被居中；但若里面还有<div>，就得给那个子 <code><div> 加 <code>display: inline-block;才受控制 - 想让块级图居中？得用
display: block; margin: 0 auto;，但前提是图片有明确宽度，且父容器不是flex或grid
最容易被忽略的一点：所有对齐效果都依赖于元素的实际渲染类型（inline/block/flex）和父容器的布局上下文。调试时优先打开浏览器开发者工具，看 computed 样式里
display和vertical-align是否如预期生效，而不是凭感觉改代码。 - 正确写法：
