Poseidon主题中HTML图片默认不居中，因其将img设为display: block并施加强CSS约束；应优先用Flex容器控制对齐，避免依赖vertical-align，并注意line-height、object-fit等细节影响。
HTML图片在Poseidon主题里默认不居中？先看CSS继承链
Poseidon主题（尤其是基于Hugo的版本）对<img>标签施加了强样式约束，比如强制display: block、预设margin、甚至通过.post-content img规则覆盖用户内联样式。垂直对齐失效，往往不是vertical-align没写，而是它根本不起作用——因为vertical-align只对inline或table-cell元素生效，而Poseidon默认把图片设为block。
实操建议：
- 优先用包裹容器控制对齐，而不是直接改
<img>本身 - 检查浏览器开发者工具中
Computed面板，确认最终生效的display值是不是block - 避免在Markdown里用
后手动加style="vertical-align: middle"，大概率被主题CSS干掉
用Flex布局让图片在段落中真正垂直居中
Poseidon的正文容器（如.post-content）通常允许子元素自由布局，只要不破坏文档流。Flex是最可靠、兼容性也够用（Hugo生成的静态页基本不考虑IE）的解法。
常见错误现象：在Markdown里写<div style="display:flex;align-items:center"><img src="x"></div>，结果图片上下留白反而更大——这是因为align-items: center只对“交叉轴”起作用，而默认主轴是水平的，图片本身高度未被约束，父容器高度塌缩，视觉上还是偏顶。
立即学习“前端免费学习笔记（深入）”；
实操建议：
- 给父
<div>加明确高度（如min-height: 200px）或设height: 100vh等可参照值 - 确保图片不设
height: auto以外的固定高，否则会撑开容器或被裁剪 - 若需图文混排（如图标+文字），用
display: inline-flex替代flex，避免换行
杂志风布局常用场景：封面图/分隔图/侧边图的对齐差异
Poseidon主题的“杂志风”本质是靠CSS Grid + float + 定宽容器组合实现的，不同位置的图片走的是不同CSS路径：
- 封面大图（
.featured-image）：通常由background-image渲染，垂直对齐靠background-position: center center，不是<img>标签 - 文章内嵌图（
.post-content img）：主题默认加了max-width: 100%和height: auto，此时用object-fit: cover配合height才能真正控形 - 侧边栏小图（
.sidebar img）：常被float: left拉偏，需清浮动或改用display: grid重排
参数差异明显：object-position影响object-fit的锚点，但对纯<img>无意义；background-position只作用于背景图；别把这三者混着试。
容易被忽略的细节：line-height、font-size 和图片基线
当图片放在<p>或<span>里作为行内元素时，它的底部默认对齐文本基线（baseline），而基线位置受父元素line-height和font-size影响。Poseidon主题常设line-height: 1.6，这会让图片下方空出远超预期的间隙。
实操建议：
- 临时调试可用
img { vertical-align: top }或vertical-align: -4px微调，但别长期依赖像素值 - 更稳妥的是统一设
img { vertical-align: middle }并确保父容器font-size不为0（有些重置CSS会这么干） - 如果用
rem单位定义line-height，注意根字体大小变化会连带影响图片对齐位置
杂志风排版的复杂点不在“怎么居中”，而在“居中之后是否还保持呼吸感”——多一张图、换一个字号、加一行caption，都可能让原本完美的垂直关系偏移两像素。得在真实内容密度下反复验视，而不是只看单图demo。
