HBuilderX中图片对齐失效主因是预览未刷新CSS、路径以项目根目录为基准、text-align需配合display:block使用，且需关闭“启用兼容模式”以支持现代CSS特性。
图片对齐在HTML里不生效？先看CSS是否被HBuilderX忽略
HBuilderX默认用内置浏览器预览HTML，但它的实时预览（Ctrl+R）不会自动刷新CSS样式变更，尤其当你改了img的align属性或vertical-align时，看起来“没反应”大概率不是代码写错，而是预览没重载样式。
-
align是HTML4旧属性，<img align="right" alt="HTML怎么用HBuilderX运行图片对齐_HBuilderX一键预览HTML效果" >在现代浏览器中已被废弃，HBuilderX的预览内核（基于Chromium）直接无视它 - 必须用CSS控制对齐：比如
img { float: right; }、img { vertical-align: middle; }或Flex布局 - 改完CSS后务必手动刷新预览页（F5），或关掉再点“运行到浏览器”——Ctrl+R只刷新HTML结构，不强制重读CSS文件
HBuilderX一键预览时图片路径报404？检查相对路径根目录
HBuilderX的“运行到浏览器”默认以项目根目录为Web服务器根路径，不是以当前HTML文件所在目录为基准。所以<img src="images/logo.png" alt="HTML怎么用HBuilderX运行图片对齐_HBuilderX一键预览HTML效果" >能加载的前提是：项目根目录下存在images/logo.png，而不是和HTML同级的images/子目录。
- 错误写法：
<img src="../assets/icon.jpg" alt="HTML怎么用HBuilderX运行图片对齐_HBuilderX一键预览HTML效果" >（假设HTML在pages/下，而图片在assets/）→ 路径从项目根算起，../无效 - 正确写法：统一用项目根为起点，如
<img src="assets/icon.jpg" alt="HTML怎么用HBuilderX运行图片对齐_HBuilderX一键预览HTML效果" >，前提是assets/在项目根目录下 - 如果图片确实在HTML同级目录，用
<img src="./icon.jpg" alt="HTML怎么用HBuilderX运行图片对齐_HBuilderX一键预览HTML效果" >（./明确表示当前目录，HBuilderX支持）
用text-align对齐图片无效？那是块级元素没处理好
text-align: center只对行内元素及其内部文本起作用。如果你把<img alt="HTML怎么用HBuilderX运行图片对齐_HBuilderX一键预览HTML效果" >放在<p></p><div class="aritcle_card flexRow">
<div class="artcardd flexRow">
<a class="aritcle_card_img" href="/xiazai/skill9263" title="Html2md"><img
src="https://img.php.cn/upload/skill/000/000/081/179249945220127.jpg" alt="Html2md" ></a>
<div class="aritcle_card_info flexColumn">
<a href="/xiazai/skill9263" title="Html2md">Html2md</a>
<p>使用 Readability + Turndown 将 HTML 页面转换为干净的、Agent 友好的 Markdown。去除导航栏、广告、页脚、Cookie 横幅、社交按钮等干扰元素。支持 URL...</p>
</div>
<a href="/xiazai/skill9263" title="Html2md" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span> </a>
</div>
</div>里却没居中，大概率是因为<p></p>默认是块级，而text-align影响的是它内部的“行框”，不是<img alt="HTML怎么用HBuilderX运行图片对齐_HBuilderX一键预览HTML效果" >自身的位置逻辑。
- 想让单张图片水平居中：给
<img alt="HTML怎么用HBuilderX运行图片对齐_HBuilderX一键预览HTML效果" >加display: block;再配margin: 0 auto; - 想让多张图片并排居中：父容器设
text-align: center;，图片保持默认inline或设display: inline-block; - 避免用
<center></center>标签——HBuilderX预览会渲染，但已废弃，且在某些文档模式下失效
预览效果和Chrome不一致？关掉HBuilderX的“启用兼容模式”
HBuilderX有个隐藏开关：在“设置 → 编辑器设置 → 运行配置”里，“启用兼容模式”默认开启，它会让预览内核模拟IE7–8行为，导致flex、grid、object-fit等现代CSS特性被降级或忽略。
立即学习“前端免费学习笔记（深入）”；
- 现象：明明写了
img { object-fit: cover; }，预览里图片还是拉伸变形 - 解决：关闭“启用兼容模式”，重启HBuilderX，再运行预览
- 验证方式：在预览页按F12打开开发者工具，看
document.documentMode是否为undefined（正常）；若返回数字（如7/8），说明兼容模式仍在生效
