Question

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

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

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

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

为自己节省大量的代码编写和维护。使用 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 2

将垂直对齐添加到.centered *

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

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

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/
在这种情况下，表单元素上的行高有用。

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

3 个答案: