为什么 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 检查器中，为图像突出显示的边界框也不对应于它在页面上的呈现位置（边界框是正确的）。

我为这个 header 栏设计的 CSS 是不是错了？

Answer 1

也为图片应用vertical-align: middle;..

Answer 2

对一个元素应用垂直对齐不会导致另一个元素未对齐。

如果您不应用垂直对齐，那么两个元素（在您的示例中）将被浏览器对齐。假设如果浏览器默认是 vertical-align: top; 那么两个元素都对齐到顶部。所以，你看不到它们之间没有对齐。但是，当您对一个使用 vertical-align: middle 而对另一个使用默认设置时，浏览器默认对齐方式和您的对齐方式不匹配。因此，您会看到它们之间未对齐。

最后，在两个元素上使用垂直对齐，以便浏览器相应地呈现。

Answer 3

我会这样做：

应用与 height 相同的 line-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>

为什么 vertical-align: middle 会导致其他元素错位？

Why does vertical-align: middle causes other elements to misalign?

html

css

vertical-alignment