I have this HTML structure, and while I am open to making changes, I would prefer to keep it simple:
<div class="c">
<img ...>
</div>
The image within the div will vary in size and I want it to be vertically centered. Currently, I am using the following CSS:
.c {
width: 40px;
height: 40px;
overflow: hidden;
}
.c img {
width: 40px;
height: auto;
}
I have experimented with the table and table-cell method in CSS, but the container expands to accommodate the image, even with overflow: hidden. I have also thought about utilizing server-side techniques such as using position: relative with a negative top value on the <img>, but I would rather avoid additional server-side processing if possible. JavaScript is not an option I want to consider, so if that is the only alternative, I would rather handle it server-side.
It's worth noting that the image will always be 40x40px or larger.
Here is a link to a fiddle where I attempted to use display: table.