优先用Flex布局解决缩略图与标题对齐问题：给图片容器设display:flex; align-items:flex-start;，标题用align-self:center;；避免float和vertical-align失效，统一弹性容器对齐基准，并删除固定height确保响应式正常。
缩略图在新闻列表里不和标题对齐？优先用 Flex 布局
newsup 主题本质是 wordpress 主题，但它的缩略图对齐问题，根源不在 php 模板，而在输出后的 html 结构和 css 渲染。新闻列表页常见的“左图右文”结构，图片偏高、文字下沉、日期错位——这些都不是主题 bug，而是浮动（float）或默认行内行为没被重置导致的。
实操建议：
- 检查主题是否已给
.post-thumbnail或类似类加了float: left；如果有，确保其父容器（如.entry-content）设置了overflow: hidden或display: flex来清除浮动，否则后续文字会绕排错乱 - 直接覆盖样式：给图片容器设
display: flex; align-items: flex-start;，再让标题和摘要作为子元素，用align-self: center;单独调文字垂直位置 - 别依赖
vertical-align: middle作用于<img>本身——它只对行内上下文有效，而 Newsup 默认常把缩略图包在<div>里，此时该属性无效
图片底部和发布时间文字不对齐？关键是 align-items 值选错
新闻列表右侧常有标题 + 简介 + 时间三行内容，时间标签往往右浮动或绝对定位。如果缩略图高度不一致，时间就容易“悬空”或“压进图片里”。这不是图片尺寸问题，是弹性容器的对齐基准没统一。
常见错误现象：
- 写了
align-items: center，但时间文字还是贴着顶部 → 因为容器高度未定义，center在无高度时退化为stretch - 用了
align-items: flex-end，图片和时间底部对齐了，但标题却上移了 → 标题默认margin-top撑开空间，需重置margin: 0或改用gap - 主题启用了
line-height全局继承，导致时间文字行高过大，视觉上“浮起来” → 直接给时间元素加line-height: 1.2覆盖
响应式下缩略图错位？别用 width/height 固定像素
Newsup 主题多数支持移动端，但很多用户手动给缩略图加了 width: 150px; height: 100px;，结果在小屏上图片被裁切、文字换行错位、甚至 flex 容器溢出。CSS 的 height 固定值会破坏 intrinsic ratio（固有宽高比），而 Newsup 的缩略图函数（如 the_post_thumbnail()）默认输出的是带 srcset 的响应式图片。
立即学习“前端免费学习笔记（深入）”；
实操建议：
- 删掉所有显式的
height声明，只留max-width: 100%; height: auto; - 若需等高卡片效果，在父容器（如
.post-item）上用display: grid; grid-template-rows: auto 1fr auto;控制标题、摘要、时间区域高度分配 - 避免用
background-image替代<img>—— Newsup 的懒加载、SEO alt 属性、无障碍支持都依赖真实<img>标签
WordPress 后台上传后缩略图不显示或偏移？查 post_thumbnail_size 和 crop 设置
这不属于前端 CSS 问题，但常被误判为“对齐失败”。Newsup 主题通常调用 add_image_size('new-sup-thumb', 300, 200, true); 这类注册语句，其中第三个参数 true 表示硬裁剪。如果上传的原图比例和设定尺寸不一致，缩略图会被强制裁切，导致关键内容（比如人脸）被切掉，看起来像“位置偏了”。
使用场景：
- 刚换主题或更新后缩略图全变成灰色方块 → 运行
Regenerate Thumbnails插件重建尺寸 - 某些文章缩略图正常，某些明显偏移 → 检查该文章上传时原图宽高比是否严重偏离
300x200（即 3:2），考虑改用false关闭硬裁，或新增一个宽松尺寸如add_image_size('new-sup-thumb-flex', 300, 9999, false); - 后台「设置 > 媒体」里的“中等大小”等全局尺寸被修改过 → 可能干扰主题自定义尺寸的 fallback 行为，建议保持默认或注释掉冲突的
set_post_thumbnail_size
真正卡住人的，往往是 flex 容器没设高度时 align-items 失效，或者 WordPress 图片尺寸注册和实际输出不匹配——这两点不排查，调再多 CSS 都只是临时遮掩。
