如何在 Wordpress 中将所有帖子的特色图片垂直居中？答案

【问题标题】：How do I vertically center the feature image for all posts in Wordpress?如何在 Wordpress 中将所有帖子的特色图片垂直居中？
【发布时间】：2023-01-03 03:43:18
【问题描述】：

我有一个香草网站，已经有很多帖子了。所有这些的横幅特征图像都设置为“顶部对齐”作为默认设置，所以它看起来很糟糕。我希望所有横幅特色图片都简单地垂直居中对齐。

我从帖子中尝试了这个 .css，但它在 style.css 中不起作用，没有影响（也许它只影响主登录页面？）。

.banner {
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center; 
}

有没有人有不需要插件的简单解决方案？谢谢。

【问题讨论】：

在父元素上使用 display: grid; place-items: center 通常水平和垂直居中父内容，这是否是居中视口取决于父元素的高度/宽度。如果.banner是父母，图像应该像那样居中（给定适当的大小限制等）。 Dunno about Wordpress, though, not a user...
谢谢@RenevanderLende，但我要求更改 Wordpress 的配置以将横幅设置为所有帖子的垂直居中。看起来您建议编辑特定帖子的基础 HTML。我不确定如何在 Wordpress 中执行此操作。你能包括步骤吗？

标签： css wordpress image banner

【解决方案1】：

根据我的评论，我创建了一个小的 sn-p 来展示我的意思：

在父元素上使用 display: grid; place-items: center 通常水平和垂直居中父内容，这是否是中心视口取决于父元素的高度/宽度...

sn-p

* { outline: 1px dashed } /* for debugging */

/********************************/
/* some convenient global rules */
/********************************/
 *         { box-sizing: border-box }
html, body { width: 100%; max-width: 100% }

/* make room to minimally occupy the full viewport */
body { min-height: 100vh; margin: 0 }
/* ... and kill the default margin */

/* some full page parent */
.parent {
    display: grid; place-items: center;
    width: 100vw; height: 100vh;
}

.banner {
    /* restrict banner size, either 30rem
       or full width if less available (mobile) */
    max-width: min(30rem, 100%);
}

img {
    display: block;    /* removes tiny space below image */
    width: 100%;       /* stretch to fill parent */
    height: auto;      /* follow where width leads */
    object-fit: cover; /* clip if larger than space available */
}

<div class="parent">
    <div class="banner">
        <!-- retrieve some large picture -->
        <img src="https://picsum.photos/1280?random">
    </div>
</div>

【讨论】：

这是对 Wordpress 的配置更改吗？如果是这样，你能包括步骤吗？
@AppDreamer，我不知道。也许这（或类似的东西）在您的 Wordpress 管理仪表板中的“自定义 CSS 和 JS”下用作自定义代码。
谢谢@RenevanderLende。我在想，既然 Wordpress 是一个相当成熟的平台，那么这一定是某个地方的简单配置设置。我无法想象他们会简单地告诉所有数以百万计的海报在每一个帖子上编辑他们的图像。希望有人能快速回答。

【解决方案2】：

经过详尽的搜索，我发现最好的解决方案是显示整个图像。这需要覆盖主题设置。要到达那里，请从控制面板转到：外观 -> 主题 -> 自定义。然后在左栏的底部，单击“附加 CSS”。输入以下内容，然后单击左栏顶部的发布按钮...

.post__thumbnail
{
    padding: 29% !important;
}

我本来希望保持图像帧动态并显示在图像的中心条上，以最适合各种设备，但就目前而言，这对我来说是最好的选择。

【讨论】：