How to achieve vertical centering of an image in an li element with fixed dimensions while maintaining 100%

I need help with vertically centering an image within a fixed width and height list item. Here's the HTML I'm working with:

<ul class="list">
    <li class="list-item">
        <div>
            <img src="http://lorempixel.com/400/200" />
        </div>
    </li>
    <li class="list-item">
        <div>
            <img src="http://lorempixel.com/400/200" />
        </div>
    </li>
    <li class="list-item">
        <div>
            <img src="http://lorempixel.com/400/200" />
        </div>
    </li>
    <li class="list-item">
        <div>
            <img src="http://lorempixel.com/400/200" />
        </div>
    </li>
</ul>

And here's the CSS I've been using:

.list-item {
    float: left;
    list-style: none;
    width: 200px;
    height: 80px;
    box-sizing: border-box;
    padding: 10px;
    background-color: #63A578;
}

.list-item div {
    overflow: hidden;
    text-align: center;
    height: 80px;
    width: 100%;
    line-height: 80px;
    border: 1px solid red;
}

.list-item img {
    height: auto;
    width: 100%;
    vertical-align: middle;
}

I've tried different solutions like the one mentioned here but none seem to work when the container is smaller than the image height, causing it to overflow (jsfiddle for reference).

Can anyone suggest a way to vertically center a full-width image in a fixed-height container without it overflowing?

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 Jquery function .load() doesn't load HTML comment tags as expected

Utilizing the .load() Jquery function enables me to insert html tags from one file into another. Here is an example of the code: <html> <head> <script src="jquery.js"></script> <script> function loadConte ...

Instructions on how to change the color of specific text to red

Issue: While working on my testimonials page, I am facing a problem with displaying an "ADMIN" tag in red color instead of normal stars for one of the responses by an admin. I have tried various solutions like removing the ending p tag and adding quotes to ...

What is the best way to insert HTML elements in front of other HTML elements using a form and jQuery?

I am looking to insert new HTML elements before existing ones using a form and jQuery: Here is the initial HTML Code: <div class="main-content"> <h2 class="main-content-header">Projekte</h2> <div class="project-content"> ...

"Enhance Your Website with a Sticky Bootstrap Navbar and Seamless Scroll Design - Elevating Padding and Margin-

I am currently working on incorporating a bootstrap sticky navbar with a fixed height of 81px and smooth-scroll behavior into my project. The website's HTML structure includes section tags like <section class="section" id="news" ...

Using HTML URL parameter in PHP code

Hi there, I'm new to using PHP and would appreciate any help you can provide. I'm facing an issue with passing a URL parameter from an HTML page (mywebsite.com/f.html?survey_id=5d86055f35bf41f3a35f2c779fc478dc) to a PHP script that should save t ...

Eliminating the boundaries of Bootstrap accordion

I'm currently working on creating Bootstrap accordion menus and I'm attempting to remove the border that appears when it's collapsed and expanded. Below is the code I've been working on: <div class="accordion"> <div ...

Caution: Additional server attributes detected: style

Alert in my Next.js project, I encountered the following message: Notice: Server is sending additional attributes: style I am uncertain about the source of this warning and therefore unable to provide any code snippet. ...

What is the method for modifying the appearance of the background property on an input element?

I am currently working on customizing an HTML5 video player's track bar using CSS. My goal is to utilize jQuery to modify the style of the track bar. One way I have attempted to change the background of the track bar with jQuery is by employing the f ...

Errors in AMP Validator

I have recently started working with next/amp and I am encountering some issues with the amp validator in dev mode. The errors that I am struggling to understand are as follows: An error related to CSS syntax in the 'style amp-custom' tag - show ...

How to Incorporate an Anchor Link into a Div as well as its Pseudo Element using CSS, Javascript, or jQuery

How can I make both the menu item and its icon clickable as a link? When either is clicked, the link should work. Here is a CodePen example: http://codepen.io/emilychews/pen/wJrqaR The red square serves as the container for the icon that will be used. ...

Discovering more about this topic

Looking for a way to create an expandable box that enlarges when "read more" is clicked, revealing text below it. And also looking to add a button that closes the expanded text back up. Experimented with the toggletext JavaScript command, as found on this ...

Move the text above within the footer using materialize framework

I'm facing an issue with my materialize footer's text disappearing when I set the height to 35px. Whenever I decrease the size of the footer, the text goes off the screen. How can I adjust it so that it stays visible? <footer style="positio ...

Why does changing the order of layers in Kinetic.JS affect the color of my shapes?

Currently experimenting with Kinetic.JS, I managed to create a UFO-like shape using two parts - a red hull and a grey disc. Check out the demo on JSBin My question is: why does the color of the disc change from grey to red when I rearrange the shape orde ...

Arrange flexbox containers side by side in a horizontal row

I am attempting to create two flexbox containers one after the other, utilizing a combination of classes to achieve this layout. While the flexbox is created successfully, I encounter an issue where the lower container goes below the upper one when scrolli ...

Is it possible to have animations play in reverse once they have completed running?

Hi there! I'm currently tinkering with the transitioning animations for my navigation button. I've successfully implemented the opening animation where the three bars morph into a single line and the menu slides out. Now, I'm looking to crea ...

Choosing multiple images by clicking on their alternative text with jQuery

I am currently working on a project that involves clicking on a thumbnail to enlarge the image and display its name (alt) below it. I have made progress, but there seems to be an issue where only one image is displayed no matter which thumbnail I click on. ...

fixed footer with fixed height on parent container

I have successfully implemented a sticky footer on my web pages by following specific instructions. http://css-tricks.com/snippets/css/sticky-footer/ The recommended approach includes using min-height:100% and not specifying the height property. .page-w ...

Tips on how to showcase up to 200 characters from a string

<?php include ($_SERVER['DOCUMENT_ROOT'].'/header.php'); include ($_SERVER['DOCUMENT_ROOT'].'/adtop.php'); if(mysql_num_rows($deals) > 0){ while($row = mysql_fetch_assoc($deals)){ echo '<div id= ...

Nested divs with CSS padding inside

I'm curious about the excessive padding above and below the text in this fiddler box. http://jsfiddle.net/fZ6d7/1/ CODE <style> .simplebox { padding: 6px; background: #eee; border-radius: 8px; border: 1px ...

Comment sections that refresh automatically after being posted

I am determined to provide a clear explanation. Despite having some code, I am uncertain about how to make it clone comments and add new ones with user inputted text. Below is the snippet of code I am struggling with: <!DOCTYPE html> <!-- this i ...