csswordpressimagebanner

How do I vertically center the feature image for all posts in Wordpress?


I have a vanilla site and have a lot of posts already. The banner feature image for all of them is set to "top aligned" as a default setting so it looks pretty bad. I'd like ALL banner featured images to simply be vertically center aligned.

I tried this .css from a post, but it doesn't work in style.css, has no affect (maybe it just impacts the main landing page?).

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

Does anyone have a simple solution that doesn't require plugins? Thanks.


Solution

  • After exhaustive search, I found the best solution is the show the whole image. This requires an override of the theme settings. To get there, from the control panel, go to: Appearance -> Themes -> Customize. Then at the bottom of the left column, click on Additional CSS. Enter the following and click Publish button at the top of the left column...

    .post__thumbnail
    {
        padding: 29% !important;
    }
    

    I would have liked to keep the image frame dynamic and shown on the center sliver of the image as best served for various devices, but for now, this was the best option for me.