如何在WordPress中垂直居中所有文章的横幅特色图片？

你之前用的CSS没效果，大概率是选择器不对——.banner可能只是首页横幅的类，文章页的特色图容器类名不一样。给你几个无插件的靠谱方案：

第一步：找对文章页特色图的容器类 #

1. 打开任意一篇文章，按F12打开浏览器开发者工具
2. 用「选择元素」工具点击横幅特色图，找到它的父容器，查看容器的class属性（比如常见的.post-thumbnail、.entry-banner、.single-post-header）

第二步：根据图片实现方式加对应CSS #

情况1：横幅是背景图实现的（大部分主题用这个方式） #

把下面的.your-banner-container-class换成你找到的实际类名，添加到WP后台「外观-自定义-额外CSS」里：

.your-banner-container-class {
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
  min-height: 300px; /* 按需调整高度，确保容器有足够空间 */
}

情况2：横幅是<img>元素直接插入的 #

同样替换类名后添加CSS：

.your-banner-container-class {
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  min-height: 300px; /* 按需调整 */
}
.your-banner-container-class img {
  width: 100%;
  height: auto;
  object-fit: cover; /* 保持图片比例，自动裁剪上下多余部分 */
}

注意事项 #

• 别直接改主题的style.css，主题更新会覆盖你的修改，用「额外CSS」更安全
• 如果添加后还是没效果，检查是不是有其他优先级更高的CSS覆盖了，临时可以加!important测试（比如background-position: center center !important;），但最好还是优化选择器优先级（比如用.single-post .your-banner-container-class这种更具体的选择器）

内容的提问来源于stack exchange，提问作者AppDreamer