html - 垂直对齐未知高度的 float 元素

Question

我想创建一个包含两列的标题，一列用于“品牌名称”，一列用于按钮，例如登录、注册等。

但是我不知道如何将它们垂直居中放置在页眉中，因为按钮比品牌名称高得多。

我也已经偶然发现了 this question ，但是那里建议的解决方案并没有解决我的问题。

到目前为止我得到了什么:

header {
  border: 1px dotted magenta;
}
header:after {
  content: "";
  display: table;
  clear: both;
}

#left {
  background-color: #cfc;
  float: left;
  vertical-align: middle;
}
#right {
  background-color: #ccf;
  float: right;
  vertical-align: middle;
}

button {
  padding: 8px 10px;
}

<header>
  <div id="left">
    My brand name
  </div>
  <div id="right">
    <button>Button 1</button>
    <button>Button 2</button>
    <button>Button 3</button>
  </div>
</header>

如您在上面的代码片段中所见，文本 My brand name 与顶部垂直对齐。但是，期望的结果是文本在标题内垂直居中。我怎样才能做到这一点？

Answer 1

你可以用 Flexbox 做到这一点，你只需要在 header 上使用 align-items: center 来垂直对齐。

header {
  border: 1px dotted magenta;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
#left {
  background-color: #cfc;
}
#right {
  background-color: #ccf;
}
button {
  padding: 8px 10px;
}

<header>
  <div id="left">
    My brand name
  </div>
  <div id="right">
    <button>Button 1</button>
    <button>Button 2</button>
    <button>Button 3</button>
  </div>
</header>