CSS: Почему «vertical-align: middle» не работает?

Рассмотрим следующий пример: ( живая демонстрация здесь )

HTML:

CSS:

a {
    display: block;
    background: #000;
    line-height: 40px;  
}
img {
    vertical-align: middle;
}

Результат:

Почему изображение не центрировано по вертикали?

Как я могу это исправить, чтобы он работал во всех основных браузерах?

Пожалуйста, не предполагайте никакого размера изображения (например, 32x32 в данном случае), потому что в реальном случае размер изображения неизвестен.