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 执行此操作，只需使用align-items: center上的header进行垂直对齐。

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 ，适用于IE 6+

＆＃13;

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;
}

＆＃13;

<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>

＆＃13;

或查看此处https://codepen.io/artysimple/pen/XeEjbj?editors=1100

位置和变换器的

变体2 在IE 9+中工作

＆＃13;

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;
}

＆＃13;

<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>

＆＃13;

或查看此处https://codepen.io/artysimple/pen/dVmpXd

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

2 个答案: