为什么vertical-align：middle将我的图像从容器中推出？

Question

JSFiddle link

HTML：

<div id="va-m">
    <img src="http://placehold.it/150x150">
    <h1> vertical-align: middle </h1>
</div>
<div id="no-va">
    <img src="http://placehold.it/150x150">
    <h1> no vertical align </h1>
</div>

CSS：

div {
    margin-top: 30px;
    padding: 5px;

    width: 500px;
    height: 150px;
    line-height: 200px;
    background-color: blue;
}

#va-m img {
    vertical-align: middle;
}

h1 {
    display: inline;
}

img {
    border-radius: 75px;
}

我正在尝试在容器div中垂直对齐图像和文本。但是，我似乎要么选择对齐图像，要么对齐文本。在img标签上使用vertical-align：middle会将其推出容器。为什么呢？

Answer 1

将高度更改为auto

Fiddle

div {
    margin-top: 30px;
    padding: 5px;    
    width: 500px;
    //height: 150px;
    height: auto;
    line-height: 200px;
    background-color: blue;
}

更新：使用table和table-cell + vertical-align: middle

Fiddle