What is the best way to ensure the feature image is perfectly centered vertically for every post on Wordpress?

I currently have a vanilla website with numerous posts, each of which has a banner feature image set to "top aligned" as the default setting. This results in an unappealing layout. I am looking for a way to vertically center align all banner featured images.

I attempted to use the following .css code from a post, but unfortunately it did not work when added to style.css. It seems to only affect the main landing page.

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

If anyone has a straightforward solution that does not require plugins, I would greatly appreciate your help. Thank you.

csswordpressimagebanner

Answer №1

After leaving a comment, I decided to put together a small demonstration to illustrate my point:

When you use 

display: grid; place-items: center
on the parent of an element, it typically centers the content both horizontally and vertically within the parent. Whether this appears centered in the viewport depends on the dimensions of the parent...

demonstration

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

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

/* create space to optimally occupy the entire viewport */
body { min-height: 100vh; margin: 0 }
/* ... and remove the default margin */

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

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

img {
    display: block;    /* eliminates spacing below image */
    width: 100%;       /* expands to fill parent */
    height: auto;      /* adjusts according to width */
    object-fit: cover; /* clips if larger than available space */
}
<div class="parent">
    <div class="banner">
        <!-- display a large image -->
        <img src="https://picsum.photos/1280?random">
    </div>
</div>

Answer №2

After an extensive search, I discovered that the most effective solution is to display the entire image. This involves overriding the theme settings. To do this, navigate from the control panel to: Appearance -> Themes -> Customize. Next, click on Additional CSS at the bottom of the left column. Input the following code and hit the Publish button located at the top of the left column...

.post__thumbnail
{
    padding: 29% !important;
}

I initially wanted to maintain a dynamically sized image frame displayed in the center section of the image to cater to different devices, but for now, this option works best for me.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

The code "transform: rotate(' ')" does not seem to be functioning properly in Javascript

I set out to create a simple spin wheel exercise, but it quickly became more challenging than I anticipated. After researching how to make one online, I found code similar to mine that worked on a JSFiddle Example, yet my own code still didn't work. ...

javascripthtmlcss

Collapse in Bootstrap 3 Navigation Bar

I'm really struggling to understand why my navbar is refusing to collapse. I've included the necessary Bootstrap CSS and JS files, as well as the transition and collapse JS files. Below is the code that I've been working with. Any assistance ...

javascripthtmlcsstwitter-bootstrap

Switching between slides by utilizing anchor tags or buttons located in separate div containers

On my webpage, I have a Bootstrap carousel and I'm looking to switch between slides by using anchor tags or buttons located in separate div elements. Can anyone provide guidance on how to achieve this? ...

htmlcsstwitter-bootstrapcarouselslide

The iOS platform is experiencing issues with displaying the entire page, making it difficult to

Struggling with my website for Freecodecamp. Works fine on desktop, but iOs is a nightmare. My contact page isn't showing at all, and 75% of the bottom is cut off. Even worse, I can't click on what's visible. Help needed! Only tested on iPho ...

htmlcssbootstrap-4

Exploring the depths of navigation: Tier three

I'm struggling to get the third level of my navigation to function properly. I've managed to make the first and second levels work perfectly, but the third level isn't behaving as intended. I would like the third level to expand from right t ...

cssnavigation

Incorporating the FLEX property into my code has been a challenge as it is not functioning properly on iOS 7 and 8 devices. Does anyone have any tips or suggestions on how to

While utilizing FLEX in my code, I noticed that the output is not what I expected on iOS 7/8 devices. <div className="modal-row"> <div className="col1"> <span>{dict.YourServiceNumber}</span> </div> <div ...

htmlcssreactjsbootstrap-4flexbox

Tips for customizing the appearance of a React-Table header when sorting data

How can I change the header's background color in react-table based on a selected item? For example, if I click on ID, the ID header should change its background color to red. I have tried various methods to update the background color upon selection ...

javascriptcssreactjsreact-table

What steps should I take to ensure proper rendering of CSS in Django?

Hey there! I'm new to Django and I'm struggling to get my css to display properly. I'm trying to create a red notification, similar to Facebook, for my unread messages. But for some reason, my css isn't rendering. Can anyone point out w ...

cssdjango

JavaScript Issue Causing Jquery Carousel Dysfunction

I am having trouble with the slider I created using JS Fiddle. The link to the slider is not working and I need some assistance. Click here for the slider <div class="row"> <div id="myCarousel" class="carousel slide vertical"> &l ...

javascriptjqueryhtmlcss

The <label> tag is divided into several lines

I'm facing an issue with the <label> element in my ASP.NET Core MVC project. Instead of displaying in a single line, it's splitting into multiple lines. Upon inspecting the element in Google Chrome, I noticed that it's inheriting style ...

htmlcssasp.net-mvcasp.net-core

The toggle button requires two clicks to activate

I created a toggle button to display some navigation links on mobile screens, but it requires two clicks upon initial page load. After the first click, however, it functions correctly. How can I ensure that it operates properly from the start? Below is t ...

javascriptcssexpresshandlebars.js

Having trouble getting the drop down menu to function properly using HTML and CSS

I attempted to implement a drop-down menu using the following codes. However, I am facing some issues as clicking on the drop-down menu does not open the sub-menus as expected. Is there a way for me to resolve this problem? <div id="control-panel& ...

htmlcss

There is no element available to input text using send_keys in Selenium

Currently learning about selenium, please pardon any errors. Thank you :) I am trying to scrape a website that allows users to create blogs on 'tistory' using selenium. In order to publish an article, I need to choose between default mode, mark ...

pythonhtmlcssseleniumselect

Staggered Drop-Down Menus

I've created a custom CSS drop-down menu that works well, but I've realized that updating this menu across all the HTML pages on my website would be a tedious task. If I ever need to add a new section and tier to the menu, I'd have to update ...

htmlcssdrop-down-menu

Is there a way to incorporate text at the end of a row in HTML?

I have a photo and some text on my website. The photo is displayed on the left side, while the text appears nicely on the right side. Now, I am looking to include an additional block of text below the existing text. How can I accomplish this? What steps ...

javascriptcsshtml-table

Tips for Adjusting the Position of a DIV Element Slightly Upwards

I am having trouble positioning the home-link image in my hovering navigation bar. The URL to my blog is: . Ideally, I want the image to be aligned with the text tabs next to it, but no matter what I try, I can't seem to move the "home" icon up by abo ...

htmlcssblogger

Tips on incorporating a button to enable text formatting to 'bold' within a Text Area on an HTML webpage:

In the process of creating an online text editor, I am looking to incorporate a button above the text area that can be used to make selected text and/or upcoming text bold. To provide more clarity, I envision adding a bold button similar to the one found a ...

htmlcss

What could be the reason for this tag not functioning properly?

I am facing an issue with my navbar where the <a> tag is not updating the URL to the new address. I have tried giving the <a> tag a z-index 999;, but it still doesn't work. This is a one-page site and I use # to make the browser jump to t ...

htmlcssflexboxnavbar

I can't figure out why my navbar-brand won't budge from the left side of the screen. I've attempted using ml-5, but it's still not

https://i.sstatic.net/wo35v.jpg I have experimented with different margin classes like ml-5 in Bootstrap 5 to create spacing. <body> <nav class="navbar navbar-expand navbar-dark bg-dark"> <a class="navbar- ...

htmlcssbootstrap-5

Tips for creating a form-flip, similar to a card-flip effect, using web technologies

Looking to create a card flip effect similar to the one shown here. Once the sign up process is finished, the card will smoothly flip over to reveal the other side with a transitioning effect. ...

javascriptjqueryasp.netcssajax