Writee主题头图默认居左是因CSS未设置background-position，需在额外CSS中添加body .site-header{background-position:center center!important}；若为img标签则用.header-image{display:block;margin:0 auto}。
Writee主题头图默认居左，怎么强制居中
Writee 默认把 header-image 当作背景图写在 .site-header 上，且没设 background-position，所以浏览器按默认左上对齐。不是图片本身没居中，是 CSS 没告诉它要居中。
实操建议：
立即学习“前端免费学习笔记（深入）”；
Article To Html
下载
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
- 打开主题自定义 CSS 入口（外观 → 自定义 → 额外 CSS）
- 加这段规则，覆盖原样式：
body .site-header { background-position: center center !important; } - 如果头图仍偏移，可能是主题用了内联 style 覆盖了 CSS，此时必须加
!important - 别碰
background-size: cover—— 它会让图片拉伸填满，但可能裁掉关键区域；想保全图用contain，但会留白
用 header_image 函数输出的图片怎么对齐
部分 Writee 衍生版或手动改过模板的站点，会用 PHP 函数 the_header_image() 或 get_header_image() 输出 <img> 标签，这时头图是真实 DOM 元素，不是背景图，CSS 写法完全不同。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 先检查 HTML 源码：如果看到
<img class="header-image">，就走这个路径 - 给该元素加居中样式：
.header-image { display: block; margin: 0 auto; } - 注意
margin: 0 auto只对块级元素生效，所以必须加display: block - 如果父容器有
text-align: left，它不影响margin: 0 auto，不用管
移动端头图错位，CSS 媒体查询怎么写
Writee 主题在小屏下常把 .site-header 高度压窄，但背景图尺寸没变，导致视觉上“往上跑”或“切掉顶部”。这不是对齐问题，是响应式断点没适配。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 用开发者工具看实际断点值，Writee 多数用
max-width: 768px - 加媒体查询单独调背景位置：
@media screen and (max-width: 768px) { body .site-header { background-position: center 20% !important; } } -
center 20%表示水平居中、垂直方向从顶部往下 20%，比纯center center更稳 - 别依赖
background-attachment: fixed—— 移动端兼容差，容易卡顿甚至失效
为什么加了 CSS 还不生效？常见冲突点
Writee 主题加载顺序混乱、子主题未正确继承、或插件注入了更高优先级的样式，都会让自定义 CSS 失效。
排查步骤：
- 打开浏览器开发者工具，选中
.site-header，看右边 Styles 面板里background-position是否被划掉（表示被覆盖） - 检查是否有其他规则带
!important且权重更高，比如插件加的style标签 - 确认你编辑的是当前启用的主题，不是子主题但没激活，或启用了缓存插件没刷新 CSS
- 临时禁用所有插件，再试一次 —— 很多 SEO 或懒加载插件会重写 header 样式
真正麻烦的不是写不对，是写了但被别的地方悄悄顶掉。每次改完记得清浏览器缓存和插件缓存，不然会以为 CSS 不起作用。
