Bun运行HTML图片对齐代码及本地预览方法

本文详解了现代HTML图片对齐的正确CSS实践（摒弃已废弃的align属性，推荐flex布局、vertical-align、float及绝对定位等方案），并重点介绍了如何利用Bun的bun serve命令快速搭建本地静态服务预览HTML——涵盖启动方式、路径配置要点、常见图片404问题排查技巧，以及与Vite、Python HTTP Server的核心差异，帮助开发者避开陷阱、高效调试，尤其适合轻量级前端验证场景。

HTML图片对齐代码怎么用

HTML里图片对齐不是靠align属性（它早被废弃了），而是用CSS控制。老写法像在现代浏览器里可能失效，或行为不一致。

实际要用float、display、vertical-align或Flex布局，具体选哪个，取决于你想实现的效果：

• float: left / float: right：适合图文混排，但得注意父容器清除浮动（否则高度塌陷）
• vertical-align: middle：只对行内元素或表格单元格生效，常用来对齐图片和文字基线
• 用display: flex父容器 + align-items: center：更可靠，适合居中对齐整块内容
• 绝对定位（position: absolute）适合精确控制，但脱离文档流，需谨慎

示例：让一张图和旁边文字垂直居中

<div style="display: flex; align-items: center;">
  <img src="a.jpg" width="40">
  <span>这里是文字</span>
</div>

Bun运行本地服务器预览HTML方法

Bun本身没有内置HTTP服务器命令（不像python -m http.server），但它能极快地启动一个轻量服务——靠bun run执行一段脚本，或直接用bun serve（v1.1+ 支持）。

关键点：Bun的serve命令默认只服务当前目录下index.html，不自动处理子路径重写，也不支持热更新（HMR）。

• 最简启动：bun serve，端口默认3000，访问http://localhost:3000
• 指定端口：bun serve --port 8080
• 指定入口文件：bun serve --dir ./public（服务./public目录）
• 如果没index.html，会返回404，不会列目录（Bun默认关闭目录浏览）

注意：bun serve是开发辅助命令，不是生产服务器，不支持HTTPS、代理、自定义路由等。

为什么Bun serve打开HTML后图片不显示

常见原因不是路径写错，而是Bun服务的根目录和HTML里src路径没对齐。比如你在/project下运行bun serve，但HTML里写的是，那Bun会去找/project/images/logo.png——如果图片其实在/project/src/images/，就404了。

• 检查浏览器开发者工具的Network面板，看图片请求返回的是404还是其他状态码
• 确保src路径相对于bun serve的--dir目录，而不是HTML文件所在位置
• 避免用绝对路径如/images/xxx.png，除非你明确设置了base href或服务根为网站根
• Windows用户注意路径分隔符：Bun对\兼容性一般，统一用/

临时验证方式：把图片拖进浏览器地址栏，看能不能直接打开，能打开说明路径可访问，不能则路径配置有问题。

Bun serve和Vite/Python HTTP Server的区别在哪

核心差异在于目标定位：bun serve是“能跑就行”的快速预览工具；Vite是面向前端工程的开发服务器；Python的http.server则是通用静态文件服务。

• bun serve启动最快（毫秒级），但无路由重写、无代理、无HMR、不支持ESM动态导入调试
• Vite启动稍慢，但支持@import、