高度未知的垂直对齐浮动元素 [英] Vertical align floated elements of unknown height

问题描述

我想创建一个包含两列的标题，一列用于品牌名称。

I want to create a header with two columns, one for the "brand name" and one for buttons, such as login, sign up etc.

但是我不能将头部环绕在标题中垂直居中的位置，因为这些按钮的高度比按钮高得多。品牌名称。

However I can't wrap my head around how to vertical center them inside the header, because the buttons are much taller than the brand name.

我也偶然发现了这个问题，但是建议的解决方案确实做到了无法解决我的问题。

I also already stumbled across this question, however the solution suggested there did not resolve my issue.

到目前为止，我得到的是：

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>

如上面的代码片段所示，文本我的品牌名称垂直对齐到顶部。但是，所需的结果是文本在标题内垂直居中。我该怎么做？

As you can see in the snippet above, the text My brand name is vertically aligned to the top. However, the desired result would be the text being vertically centered inside the header. How can I accomplish this?

推荐答案

您可以使用 Flexbox 完成此操作，只需在标题上的 align-items：center 进行垂直对齐即可。

You can do this with Flexbox, you just need to use align-items: center on header for vertical align.

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>

这篇关于高度未知的垂直对齐浮动元素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！