Shapely英雄图默认不居中是因为它作为background-image而非标签存在，text-align和margin无效；需用background-position与background-size配合调整，推荐cover+center center，并通过自定义CSS添加且加!important确保生效。
Shapely 主题里英雄图（Hero Image）默认不居中，不是 CSS 写得不对，而是它压根没把图片当“内容图”处理——而是作为背景图嵌在 .hero 容器的 background-image 里。
为什么直接加 text-align: center 没用
Shapely 的英雄区域（比如首页顶部大图）通常用 .hero 或 .hero-banner 类包裹，内部没有 <img alt="HTML怎么用Shapely主题对齐英雄图_Shapely多用途主题图片居中" > 标签，只有空容器 + 背景图。所以：text-align 对背景图无效；margin: 0 auto 也无效——因为没块级可居中元素。
- 检查浏览器开发者工具，会发现图片实际是
background-image: url(...)设置在父容器上 - Shapely 默认用
background-position: center center，但若图片宽高比和容器不匹配，就会“看起来偏了” - 主题选项里所谓“居中”往往只控制文字，不控制背景图渲染行为
background-position 和 background-size 必须配对调
单改 background-position 只能挪“视野框”，真正决定是否“视觉居中”的是 background-size 如何拉伸/裁剪图片。
- 想要图片完整显示且水平垂直居中：
background-size: contain; background-position: center center; - 想要填满容器、允许裁剪、保持居中（最常用）：
background-size: cover; background-position: center center; - 如果图片本身偏左，而
cover又放大了它，center center就可能让关键内容被切掉——这时可微调成background-position: 50% 40%;抬高焦点
怎么安全加自定义 CSS（不被主题更新覆盖）
别改主题自带的 style.css，下次更新就没了。Shapely 后台有现成入口：
将 Markdown 文章转换为微信公众号兼容的纯 HTML 格式。当用户要求"转成微信格式"、"生成公众号文章 HTML"、"排版到微信草稿箱"、"微信粘贴格式"时触发。输出带内联样式的纯 HTML，微信编辑器可直接渲染，无需额外适配。支持标题、段落、列表、粗体、行内代码、表格、引用块、代码块、配图的完整转换。
立即学习“前端免费学习笔记（深入）”；
- 进 WordPress 后台 →
外观 → 自定义 → 额外 CSS - 写针对性规则，比如：
body.home .hero-banner { background-position: center center !important; background-size: cover !important; } - 加
!important是因为 Shapely 内联样式或高优先级选择器常覆盖你的规则 - 如果只针对某页面，用页面 class（如
.page-id-123）比全局.hero更稳
图片源文件尺寸比容器宽更重要
再好的 CSS 也救不了一张 800px 宽却要撑满 1920px 容器的图——它会被强行拉伸模糊，此时“居中”反而暴露像素劣化。
- Shapely 推荐英雄图宽度 ≥ 1920px，高度按比例（常见 1920×800 或 1920×1080）
- 上传时用原图，别依赖 WordPress 自动缩略图——后台媒体库里找“完整尺寸”链接才对应原始分辨率
- 如果用 Page Builder（如 Elementor）嵌套了 Shapely 英雄区，得确认 builder 层没额外加 padding/margin 挤压容器
真正卡住人的从来不是“怎么写 CSS”，而是没意识到 Shapely 的英雄图根本不在 HTML 流内——它是个带背景的空盒子。盯着 <img alt="HTML怎么用Shapely主题对齐英雄图_Shapely多用途主题图片居中" > 标签找 align 属性，只会越调越偏。
