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?