HTML中img的align属性已废弃，应使用CSS实现对齐：居中用text-align: center（外层div）或margin: 0 auto（display: block）；图文混排用float+clear:both；调试需借助浏览器开发者工具。
HTML里<img>的align属性早就失效了
别再用align="left"或align="right"——浏览器根本不认，尤其在现代标准（HTML5+）下，这个属性已被废弃，连W3C都删了。你写上去，页面可能看起来“好像对齐了”，其实是靠浏览器的容错渲染在硬撑，换台设备、换个浏览器就错位。
真正可控的方式只有两个：CSS的float（兼容老项目但需清除浮动）或display: flex/text-align（推荐新写法）。Notepad++只是个编辑器，它不决定对齐逻辑，只负责让你把正确的代码敲进去。
Notepad++里快速写图片居中对齐的三行CSS
想让一张图在页面中水平居中？不用插件、不用额外工具，直接在<img>外层套个<div>，加三行内联样式就行：
<div style="text-align: center;"> <img src="logo.png" alt="logo"> </div>
这是最轻量、兼容性最好（IE8+都支持）的做法。注意：text-align: center作用对象是它的**子元素中的行内内容**，而<img>默认就是display: inline，所以能生效。
立即学习“前端免费学习笔记（深入）”；
- 别写成
<img style="text-align: center">——text-align对<img>本身无效 - 如果图是块级用途（比如想独占一行+居中），加
style="display: block; margin: 0 auto;" - Notepad++里按
Ctrl+Space可触发HTML标签自动补全，但别依赖它生成align这种过时属性
用float实现图文混排时必须清浮动
如果你要让文字绕着图走（比如新闻配图），float: left仍是实用选择，但Notepad++里敲完容易漏掉关键一步：清除浮动。否则后续所有内容都会被“吸”上去，布局全乱。
最简方案就是在浮动元素后面加一个空<div>：
<img src="pic.jpg" style="float: left; margin-right: 10px;"> <p>这里是环绕的文字……</p> <div style="clear: both;"></div>
-
clear: both告诉浏览器：“从这开始，别再让元素贴着上面的浮动元素了” - 不写这句，哪怕你在Notepad++里格式再漂亮，预览时文字也会叠在图下面甚至跑出容器
- 现代写法倾向用
overflow: hidden或display: flow-root替代clear，但IE11及以下不支持后者
Notepad++里调试图片对齐问题的实操习惯
写完代码看不出效果？不是Notepad++的问题，而是没打开浏览器开发者工具看真实渲染结果。建议养成三个小动作：
- 保存文件后，用
Ctrl+Shift+P调出Notepad++命令面板，输入“Launch in Chrome”（需提前装好NppExec插件）快速刷新预览 - 右键网页 → “检查”，在Elements面板里点选
<img>，右边Styles栏立刻能看到实际生效的CSS（灰色的是被覆盖/无效的） - 临时加一句
style="border: 1px solid red;"到<img>上，能直观看到图片盒子的实际尺寸和位置，比猜强得多
图片对齐看着简单，但display、vertical-align、父容器line-height、甚至图片有没有透明底边，都会悄悄影响结果。别指望一次写对，多看渲染树，少信直觉。
