CSS: Why "vertical-align: middle" does not work? - html

Question

Consider the following example: (live demo here)
HTML:
<a><img src="http://img.brothersoft.com/icon/softimage/s/smiley.s_challenge-131939.jpeg" /></a>
CSS:
a {
display: block;
background: #000;
line-height: 40px;
}
img {
vertical-align: middle;
}
The output is:
Why the image is not vertically centered ?
How could I fix that so it will work in all major browsers ?
Please don't assume any image size (like 32x32 in this case), because in the real case the image size is unknown.

Answer 1

You can use position:absolute; for this.
For example:
a {
display: block;
background: #000;
line-height: 40px;
height:80px;
position:relative;
}
img {
position:absolute;
top:50%;
margin-top:-16px;
}
NOTE: This gives margin-top half of the image size.
Check this http://jsfiddle.net/cXUnT/7/

Answer 2

I can't really tell you the specifics as to why this happens (I'm curious myself). But this works for me:
a {
display: block;
background: #000;
line-height: 40px;
}
img {
vertical-align: middle;
margin-top:-4px; /* this work for me with any given line-height or img height */
}

Answer 3

You should have display: table-cell I think, this works only in tables.. I use line-height equal to height of the element and it works too.

Answer 4

I had the same problem. This works for me:
<style type="text/css">
div.parent {
position: relative;
}
/*vertical middle and horizontal center align*/
img.child {
bottom: 0;
left: 0;
margin: auto;
position: absolute;
right: 0;
top: 0;
}
</style>
<div class="parent">
<img class="child">
</div>

Answer 5

If you know the vertical size of the element and the line height, then you can vertically center it by using vertical-align: top plus a top margin.
For illustration, I created: http://jsfiddle.net/feklee/cXUnT/30/

Answer 6

Just put the img tag inside a div tag the set
display:table-cell vertical-align: middle to the div. Parent tag should be display:table
Example:
Css
a {
display: table;
background: #000;
height:200px;
}
div {
display:table-cell;
vertical-align: middle;
}
HTML
<a>
<div>
<img src="http://img.brothersoft.com/icon/softimage/s/smiley.s_challenge- 131939.jpeg" />
</div>
</a>

Answer 7

Not sure what's the cause.
Removing the line-height and adding margins to the image does the trick.
a {
display: block;
background: #f00;
}
img {
margin: .3em auto;
vertical-align: middle;
}
<a>
<img src="https://placeimg.com/30/30/any">
</a>

Answer 8

Try using a background image on an <a>:
a {display:block;background:#000;line-height:40px;background:#000 url(http://img.brothersoft.com/icon/softimage/s/smiley.s_challenge-131939.jpeg) no-repeat left center;text-indent:-999px}