HTML图片对齐不应使用已废弃的align属性，而应采用CSS的float、text-align、flex等现代方案；Dreamweaver中需通过CSS面板手动设置，设计视图可能不实时渲染，须用实时视图或浏览器预览验证。
HTML图片对齐用 align 属性？别用了，它早被废弃了
HTML5 中 align 已不是合法属性，Dreamweaver 里硬写 <img align="right"> 不报错但无效，浏览器会忽略，图片照样顶左上角堆着。这不是 Dreamweaver 的 bug，是标准早就甩掉它了。
真正起作用的是 CSS：float、text-align（对父容器生效）、或者现代布局如 display: flex。Dreamweaver 支持这些，但默认“设计视图”可能不实时反映浮动效果，得切到“代码视图”或浏览器预览才看得准。
Dreamweaver 里怎么给图片加 float 样式
Dreamweaver 的“属性检查器”底部有“CSS”按钮，点开后选“新建 CSS 规则”，类型选“标签” → img，或“类” → 自定义类名如 .img-right。别依赖“对齐”下拉菜单——那个只改废弃的 align 属性。
- 要右浮动文字绕排：在 CSS 规则里加
float: right;和margin-left: 10px;（避免贴太紧） - 要居中单独图片：不用
float，改用display: block; margin: 0 auto; - 如果父容器是
<p>，且想让图片和文字垂直居中对齐，得设vertical-align: middle;—— 但只对inline或table-cell元素有效，float后它就失效了
为什么 Dreamweaver 预览里图片不动？常见三处卡点
Dreamweaver 的“实时视图”或“设计视图”对 CSS 浮动、Flex 布局支持有限，尤其老版本（CS6 及更早）。不是代码错了，是编辑器没渲染出来。
立即学习“前端免费学习笔记（深入）”；
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
- 检查是否启用了“实时视图”（菜单栏“查看” → “实时视图”），普通“设计视图”根本不解析
float - 确认 CSS 文件已正确链接：
<link rel="stylesheet" href="style.css">在<head>里，路径没错，且文件保存了 - 浏览器缓存干扰：按
Ctrl+F5硬刷新，别信 Dreamweaver 底部的“在浏览器中预览”小窗口
用 Flex 布局替代浮动？Dreamweaver 支持但得手写
Dreamweaver CC 2015+ 能识别 Flex，但它的可视化工具几乎不提供拖拽式 Flex 控制。想让图片和文字并排、等高、居中，必须手写 CSS。
比如让一张图和一段说明文字水平居中、垂直对齐：
<div class="img-wrap"> <img src="demo.jpg" alt=""> <p>这是说明文字</p> </div>
对应 CSS：
.img-wrap {
display: flex;
align-items: center;
gap: 12px;
}
注意：gap 在旧版浏览器不支持，若需兼容 IE，还是得退回 float + 清除浮动（overflow: hidden 或 ::after 伪元素）
Flex 看似干净，但在 Dreamweaver 里没法点几下就调出来；而浮动虽然土，却能在属性面板里配个大概，再微调 CSS —— 实际项目里，多数人还是这么混着用
