Orfeo主题图片不居中主因是自定义CSS覆盖了.portfolio-item的inline-block显示逻辑；应禁用干扰样式，确保父容器text-align: center生效，并优先用max-width: 100%和object-fit控制图片。
Orfeo主题里图片不居中？检查portfolio-item的CSS类名是否被覆盖
Orfeo默认用.portfolio-item包裹每张作品图，但如果你在子主题或自定义CSS里写了.portfolio-item img { display: block; }之类规则，反而会破坏它原本依赖的inline-block对齐逻辑。Orfeo靠父容器.portfolio-grid设text-align: center来居中子项，前提是子项没被强制改成block且没设float或position: absolute。
- 打开浏览器开发者工具，选中一张图，看
.portfolio-item上有没有意外的display或margin-left: auto等样式 - 临时禁用自定义CSS，确认是否恢复居中——如果是，问题就出在你的覆盖规则上
- 想让图片宽度自适应又居中？优先改
.portfolio-item img的max-width: 100%和height: auto，别碰display
Grid布局错位：确认portfolio-grid用了display: grid而非flex
Orfeo 2.x起默认用CSS Grid实现响应式网格，但有些用户手动替换成Flexbox后，图片高度不一致时会出现错行——Grid能自动拉平行高，Flex需要额外设align-items: stretch且对min-height敏感。
- 检查
.portfolio-grid的computed样式，确认display值是grid，不是flex - 如果必须用Flex，得给每个
.portfolio-item加flex: 1 1 calc(33.333% - 20px)（对应三列），并确保所有图片有统一object-fit: cover和固定宽高比 - Grid更省心：直接在
.portfolio-grid加grid-template-columns: repeat(auto-fill, minmax(300px, 1fr))，Orfeo原生支持
图片加载后跳动：避免width/height属性写死在<img alt="HTML怎么用Orfeo主题对齐作品集图片_Orfeo创意主题图片网格布局" >标签里
Orfeo的JS会动态计算网格间隙，但如果HTML里<img style="max-width:90%" style="max-width:90%" alt="HTML怎么用Orfeo主题对齐作品集图片_Orfeo创意主题图片网格布局" >写死了尺寸，而实际图片比例不同，浏览器先按HTML属性占位、再重绘，就会闪动甚至撑开网格。
- 删掉
<img alt="HTML怎么用Orfeo主题对齐作品集图片_Orfeo创意主题图片网格布局" >标签里的width和height属性，交给CSS控制 - 用
.portfolio-item img { width: 100%; height: auto; }保持比例，或object-fit: cover裁切 - 如果后台上传时没生成响应式
srcset，手动在functions.php里用add_image_size('orfeo-portfolio', 800, 600, true)注册新尺寸，再用wp_get_attachment_image()输出
移动端图片挤压：检查@media断点是否被子主题覆盖
Orfeo在768px以下把网格从3列切到2列，480px下切到1列，但如果你的子主题CSS里写了@media (max-width: 767px) { .portfolio-grid { grid-template-columns: 1fr; } }，就会跳过Orfeo的2列逻辑，直接变单列，导致留白过大。
立即学习“前端免费学习笔记（深入）”；
- 查子主题的
style.css，删掉重复的@media规则，只保留Orfeo原生的断点 - 想微调间距？改
.portfolio-grid的gap值，比如gap: 1.5rem，别动grid-template-columns - 真要定制断点，用
@media (max-width: 767.98px)这种带小数的写法，避开Orfeo的768px整数断点冲突
最常被忽略的是图片本身没做响应式处理——Orfeo再怎么调CSS，一张2MB的原图在手机上照样卡顿、错位、放大失真。先确保上传时勾选“生成缩略图”，再检查wp-content/uploads/里有没有对应尺寸的文件存在。
