HTML怎么用Ghostbird主题对齐封面图_Ghostbird WordPress主题设置-html教程-PHP中文网

ghostbird主题封面图默认左对齐且不支持后台居中——因css强制float:left且无对齐开关；需通过自定义css覆盖：.site-header__image{float:none!important;margin:0 auto!important;display:block!important;}。

ghostbird 主题不支持封面图居中对齐——它默认强制左对齐，且没有后台开关或css类可直接切换。

为什么封面图总是靠左，改主题设置没用

Ghostbird 的封面图渲染逻辑写死在 header.php 和主题的 CSS 中：.site-header__image 被设为 float: left，同时父容器未启用 flex 或 text-align 控制。主题设置页里的“封面图位置”选项实际只影响是否显示，不影响对齐方式。

后台「外观 → 自定义 → 封面图」里所有选项都不包含对齐控制
即使上传高清图、勾选“全宽”，max-width 和 margin 仍由主题 CSS 固定为左偏移
WordPress 原生的 post_thumbnail 输出不受主题设置影响，Ghostbird 会用自己的 ghostbird_header_image() 函数接管

手动居中封面图的两种可靠方法

必须通过子主题或自定义 CSS 修改，不能直接改主题文件（升级会丢失）。推荐优先用 CSS 方式，改动小、风险低。

Html2md

使用 Readability + Turndown 将 HTML 页面转换为干净的、Agent 友好的 Markdown。去除导航栏、广告、页脚、Cookie 横幅、社交按钮等干扰元素。支持 URL...

下载

在「外观 → 自定义 → 额外 CSS」里粘贴：

.site-header__image {<br>  float: none !important;<br>  margin: 0 auto !important;<br>  display: block !important;<br>}

如果封面图是背景图（部分模板走 background-image），则要覆盖：

.site-header.has-header-image {<br>  background-position: center center !important;<br>}

若需响应式居中（尤其移动端），加一句：

@media (max-width: 768px) {<br>  .site-header__image { width: 100% !important; }<br>}

改完后封面图变形或错位？检查这三个点

Ghostbird 对封面图尺寸有隐性假设：默认期望宽度 ≥ 1200px、比例 16:9。强行居中时容易暴露原始限制。

max-width: 1200px 在主题 CSS 里存在，会截断宽图——需同步覆盖为 max-width: 100%
如果封面图本身高度不足，object-fit: cover 缺失会导致拉伸，补上：
```
.site-header__image { object-fit: cover !important; }
```
某些页面（如首页、分类页）用的是不同 header 模板，类名可能是 .archive-header__image，需单独加规则

真正麻烦的不是加几行 CSS，而是 Ghostbird 把 header 图逻辑分散在 functions.php、header.php、style.css 三处，且没用 BEM 命名。每次想调一个对齐，都得先 grep 确认当前页面加载的是哪个钩子和类名。