垂直对齐未知高度的浮动元素答案

【问题标题】：Vertical align floated elements of unknown height垂直对齐未知高度的浮动元素
【发布时间】：2018-03-19 19:46:00
【问题描述】：

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

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

我也已经偶然发现了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>

正如您在上面的 sn-p 中看到的，文本 My brand name 与顶部垂直对齐。但是，所需的结果是文本在标题内垂直居中。我怎样才能做到这一点？

【问题讨论】：

标签： html css css-float vertical-alignment

【解决方案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>

【讨论】：

【解决方案2】：

还有两个解决方案可以实现这一目标：

变体 1 带表格，适用于 IE 6+

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

#left {
  display: table-cell;
  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>

或看这里https://codepen.io/artysimple/pen/XeEjbj?editors=1100

变体 2 在 IE 9+ 中具有位置和转换器

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

#left {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  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>

或看这里https://codepen.io/artysimple/pen/dVmpXd

【讨论】：