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

Question

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

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

我也已经偶然发现了 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 与顶部垂直对齐。但是，期望的结果是文本在 header 内垂直居中。我怎样才能做到这一点？

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>

Answer 2

还有两个解决方案可以实现：

变体 1 与 table，适用于 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

Variant 2 with position and transformer 在 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

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

Vertical align floated elements of unknown height

html

css

vertical-alignment

css-float