How to perfectly center an image vertically within a div using CSS

Seeking assistance to properly align images of different sizes in the center of a container div. Check out the attached image for reference, showcasing the gray background and the desired alignment of images in the middle.

https://i.sstatic.net/M16V1.png

It becomes visually unpleasing when images have varying sizes. How can I ensure all images are vertically aligned in the middle and displayed inline?

I'm hesitant to use position: absolute as I still want the images to resize themselves (height: auto & width: 100%).

Html:

<div class="window column border small-12 medium-6 large-4 xlarge-3" *ngFor="#item of items">
            <div class="row">
                <div class="item-group">
                    <span>Free Shipping!</span>
                </div>
            </div>
            <div class="row">
                <div class="column small-12">
                    <div class="item-imagegroup">
                        <img src={{item.Image}} title="" />
                    </div>
                </div>
            </div>
            <div class="row">
                <div class="column small-12">
                    <div class="item-descriptiongroup">
                        <div class="item-header">{{item.Header}}</div>
                        <div class="item-description">{{item.Description}}</div>
                    </div>
                </div>
            </div>
            <div class="row">
                <div class="column small-12">

                </div>
            </div>
            <div class="row">
                <div class="column small-6">

                </div>
                <div class="column small-6">

                </div>
            </div>
        </div>

CSS:

.item-imagegroup {
    text-align: center;
    padding-top: 1rem;
    height: 350px;
    background-color: grey;
    vertical-align: middle; 
}

.item-imagegroup img {
    width: 100%;
    height: auto;
}

.item-image {
    margin-top: 1rem;
    margin-bottom: 1rem;     
}

The div has been fixed to maintain alignment with the text below. Open to suggestions on alternative solutions.

Hoping for some guidance from fellow developers.

Answer №1

Give this a shot!

.item {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
}

This solution should do the trick, as long as you don't need support for older browsers.

Reference:

Answer №2

To effectively use vertical-align, consider implementing it within a table structure. Create a wrapping div with "display: table;" and apply "display: table-cell;" to the div containing the image.

Ensure that all elements are set to 100% width and height for consistency.

EDIT:

HTML:

<div class="item-imagegroup">
    <div class="item-tablecell">
        <img src={{item.Image}} title="" />
    </div>
</div>

CSS:

.item-imagegroup {
    display: table;
    width: 100%;
    text-align: center;
    padding-top: 1rem;
    height: 350px;
    background-color: grey;
}

.item-tablecell {
    display: table-cell;
    vertical-align: middle;
    width: 100%;
    height: 100%;
}

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 dynamic duo: Selenium and HTML!

For the past few days, I've been using selenium to extract information from a private database of company data. Unfortunately, due to the password protection of the database, I can't share the entire python code or HTML code. Here is the specifi ...

The functionality of Intersection Observer causes text to appear over the header

Hey everyone, I've been working on a scrolling animation to make text appear when it's at least 50% visible. So far, I have an animated header with an Onscroll Event and Intersection Observer for the text. It's all working well, except for ...

I am having trouble with json_encode in my Symfony2 controller

Just starting out with Symfony2 and AngularJS. Trying to use json_encode to display content from my database, but running into issues. Here's my controller: public function catalogonewAction() { $data = $this->getDoctrine()->getManager() ...

Creating a magical transformation for the bootstrap carousel

Trying to create a bootstrap wizard with a carousel and disable auto-scrolling by setting bs-interval to "false" without success. Here is my code: <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" ...

Troubles with CSS in MUI Component Integration

How can I successfully implement a vertical timeline using Material UI in React? I've set it up, but the CSS isn't functioning as expected. Is there an error in my implementation? List of Dependencies: "@emotion/react": "^11.11.1& ...

Error message: "An issue occurred with the Bootstrap Modal in

I've designed an AngularJS app like so: <!DOCTYPE html> <html ng-app="StudentProgram"> <head> <title>Manage Student Programs</title> <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2. ...

retrieve the data-task-IDs from the rows within the table

I am currently working with a table that looks like this: <table id="tblTasks"> <thead> <tr> <th>Name</th> <th>Due</th> ...

Tips for enabling browser back and forward functionality in a one-page website design

Building on the previous discussion about optimizing a horizontal sliding layout (Most efficient way to do a horizontal sliding layout), I'm curious if it's feasible to enable the back and forward buttons in the browser when implementing a single ...

Transferring a dynamic HTML file created using R's animation package onto a WordPress platform

After using the animation package in R to create an HTML file, I'm facing some challenges uploading it to my WordPress blog. It appears that additional js or css files may be required for proper functionality, but I'm uncertain about the process. ...

Modification of encapsulated class in Angular is not permitted

Within Angular, a div element with the class "container" is automatically created and inserted into my component's HTML. Is there a way to modify this class to "container-fluid"? I understand that Angular utilizes encapsulation, but I am unsure of how ...

Align the asp.net content generated towards the left side

I am looking to optimize the layout of my asp.net code by shifting the content on all pages to the left side of the screen for better efficiency. Despite my efforts, I have been unable to find a suitable CSS solution that works universally across all view ...

Despite implementing an event listener, the Google Maps API is failing to resize properly when created using AJAX

Currently, I am facing an issue with the Google Maps API as the map generated is not resizing to fit the div. Instead, it shows a large grey area which is quite frustrating for me. Can someone please assist me in resolving this problem? Below is the code ...

Executing a function on each page within the head tag in Nuxt.js

I successfully made my function accessible by using the plugin attribute in the nuxt.config.js file, allowing me to call the function under mounted on every page. I am looking for a more efficient way to run this function within the head tag and have it b ...

Proper HTML style linking with CSS

Describing the file structure within my project: app html index.html css style.css The problem arises when trying to link style.css as follows: <link rel="stylesheet" type="text/css" href="css/style.css"/> S ...

Issue with $_SERVER['PHP_SELF'] not functioning properly

Apologies if this question has been asked before, but after searching extensively I couldn't find a solution. Therefore, I am posting here... The issue is that I'm trying to submit values on the same page (using jQuery Mobile UI) and I have used ...

How to center a responsive image in a container using Bootstrap

How can I properly center my banner and place the logo above it? Currently, both elements are not centered as desired. View the live version here: http://codepen.io/anon/pen/waYBxB HTML Code: </head> <body> <!-- LOG ...

The font size appears significantly smaller than expected when using wkhtmltoimage to render

I am trying to convert text into an image, with a static layout and size while adjusting the font size based on the amount of text. I prefer using wkhtmltoimage 0.12.5 as it offers various CSS styling options. Currently, I am working on a Mac. Below is a ...

What is the best way to position a div to float or hover from the bottom after it has been

I am working on creating a menu where clicking it will reveal a submenu at the bottom, but I'm encountering an issue. Currently, in my code, the submenu is appearing from right to left before moving down. Here is my code: <meta name="viewport" co ...

jQuery Counter Effect encountering isNaN error when trying to display a number retrieved from a get API object

I am looking to display the numerical data retrieved from an API using JSON. I want to incorporate a counter effect that displays "isNaN" if necessary. The API URL returns an object with the total number saved in data.data. Can anyone assist me with achi ...

Having trouble with your Bootstrap Accordion panels?

I am in the process of creating a unique accordion-style panel for a client's website. However, I am facing difficulties as this is my first attempt at setting up such panels and it doesn't seem to be functioning correctly. I'm not sure if I ...