如何在没有表格的情况下垂直对齐 header 中的元素？

Question

CSS 中的垂直对齐似乎是一个常见问题，但我似乎无法解决这个问题。我正在尝试创建一个基本的 header（为练习重新创建 Youtube 视频页面），但我无法让搜索表单和徽标在 header div 中垂直对齐。

这是我所做的 JSFiddle：https://jsfiddle.net/eternal/qp6cqtaj/

我试图复制一个我发现使用过 pseudo-classes 的解决方案，但到目前为止它没有用。

HTML

<div class="header">
  <div class="centered">
    <img src="http://i.imgur.com/EFkps0m.png"></img>
    <form>
       <input type="text">
    </form>
  </div>
</div>

CSS

.header {
  min-width: 60px;
  width: auto !important;
  white-space: nowrap;
  height: 50px;
}

.header:before {
  content: '';
  display: inline-block;
  vertical-align: middle;
  height: 100%;
}

.centered {
  display: inline-block;
  vertical-align: middle;
  width: 100%;
  height: 100%;
}

.centered * {
  display: inline-block;
}

.header form {
  left: 25px;
  width: 65%;
  max-width: 583px;
  height: 50%;
}

.header input {
  width: 100%;
}

Answer 1

将垂直对齐添加到 .centered *

.centered * {
    display: inline-block;
    vertical-align: middle;
}

https://jsfiddle.net/qp6cqtaj/2/

Answer 2

节省大量代码编写和维护工作。使用 CSS Flexbox.

HTML

<div class="header">
    <img src="http://i.imgur.com/EFkps0m.png">
    <form><input type="text"></form>
</div>

CSS

.header {
    display: flex;
    justify-content: flex-start;
    align-items: center; /* this one line vertically centers all child elements */
    height: 50px;
}

.header > form {
  width: 65%;
  margin-left: 25px;
}

.header > form > input {
  width: 100%;
}

https://jsfiddle.net/qp6cqtaj/5/

一些注意事项：

使用 flexbox，您可以减少大约 60% 的代码来实现您的目标。
布局是响应式的。
使用 justify-content 和 align-items 属性很容易水平或垂直对齐子元素。
<img> 标签是 void element。不需要结束标签。您可以删除 </img>.

Answer 3

实际上，您可以简化您的 HTML，不需要居中 div:

<div class="header">
<img src="http://i.imgur.com/EFkps0m.png"></img>
<form>
<input type="text">
</form>
</div>

并且，由于您已经使用固定高度：

 .header {
  min-width: 60px;
  width: auto !important;
 white-space: nowrap;
  height: 50px;

}

.header form {
  left: 25px;
  width: 65%;
  max-width: 583px;
  height: 50px;
  line-height:50px;
    display:inline-block;
    margin:0;
    padding:0;
      vertical-align: middle;
}

.header input {
  width: 100%;
}
.header img {
    display:inline-block;
     vertical-align: middle;
}

演示：http://jsfiddle.net/74bhq5bj/2/
在这种情况下，表单元素上的行高会有所帮助。

如何在没有表格的情况下垂直对齐 header 中的元素？

How can I vertically align elements in a header without tables?

html

css

vertical-alignment