Question 2230 in Wordpress Question posted in
The official Wordpress documentation can be found here.

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.

Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    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.


  2. 0

    Following my comment I created a little snippet showcasing what I mean with:

    Using display: grid; place-items: center on an elements parent usually horizontally and vertically centers the parent content, whether this is center viewport depends on height/width of the parent…

    snippet

    * { 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>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search