为什么vertical-align：middle导致其他元素不对齐？

Question

使用此代码：

.header {
  background-color: #444;
  height: 56px;
  color: white;
}

a {
  padding: 20px;
}

input {
  background-color: #444;
  border: 0;
  line-height: 24px;
  margin-left: 10px;
  color: white;
  height: 56px;
  padding: 0;
  font-size: 20px;
  vertical-align: middle;
}

<div class="header">
  <a href="#">
    <img src="http://directoryapp.trimian.com/img/directory/ic_search_white.png" />
  </a>
  <input placeholder="Search" />
</div>

http://plnkr.co/edit/o6Gh6tARL7Kt1zxNHaFO?p=preview

为什么图像不对齐？如果我删除输入上的vertical-align: middle，则图像排列正常。

在chrome检查器中，为图像高亮显示的边界框也与页面上呈现的边界不对应（边界框是正确的）。

我为这个标题栏设计CSS是错误的吗？

Answer 1

对一个元素应用vertical-align不会导致另一个元素的未对齐。

如果不应用vertical-align，则浏览器将两个元素（在您的示例中）对齐。假设浏览器默认值为vertical-align: top;，则两个元素都对齐到顶部。所以，你看他们之间没有错位。但是当你使用vertical-align: middle和另一个默认时，浏览器默认对齐和你的对齐不匹配。所以，你看到它们之间的错位。

总而言之，在两个元素上使用vertical-align，以便浏览器相应地进行渲染。

Answer 2

这就是我要做的事情：

应用与line-height相同的height并移除vertical-align:middle。

这是一个片段：

.header {
  background-color: #444;
  height: 56px;
  color: white;
}
a {
  padding: 20px;
  text-decoration: none;
  line-height: 56px;  /*new */
}
input {
  background-color: #444;
  border: 0;
  line-height: 56px;  /*changed from 24 to 56px */
  margin-left: 10px;
  color: white;
  height: 56px;
  padding: 0;
  font-size: 20px
}

<div class="header">
  <a href="#">
    <img src="http://directoryapp.trimian.com/img/directory/ic_search_white.png" />
  </a>
  <input placeholder="Search" />
</div>

Answer 3

同时为图片申请vertical-align: middle; ..