将 header 内的所有内容与其基线垂直对齐？

Question

我知道这个问题已经被问死了，但我似乎无法解决任何问题。请同情，我已经努力了好几天了！

我想将 header 元素中的所有内容垂直居中在其高度的中心。最终我打算在 header 中放置一个小徽标、标题和导航链接。当徽标和标题向左浮动时，导航链接需要保持向右浮动。

为什么在 html/css 中垂直对齐变得如此困难！

我更喜欢一种解决方案，它可以直接执行我想要的操作，而不是通过元素周围的 fixing/padding/adjusting 操作，但如果这是唯一的方法，那很好。这是我目前所拥有的。

* {
  border: 1px solid black
}

header h1 {
  display: inline;
}

header nav {
  display: inline;
  float: right;
}

<header id='header'>
  <h1>Obla Di Obla Da</h1>
  <nav id="nav">
    <a href="https://google.com">Evil</a> |
    <a href="https://duckduck.com">Not Yet Evil</a>
  </nav>
</header>

Answer 1

当涉及到垂直轴时，浮点数和内联元素是一场噩梦。你应该看看使用 Flexbox - 它确实擅长 intra-element 定位 - 即它的 align-items: center 属性值（假设你使用的是 flex row而不是 flex column 在这一点上你会想要 justify-content: center)

看看这个片段

* {
  border: 1px solid black
}

#header {
  background: #0095ee;
  color: #fff;
}

.flex {
  display: flex;
}

.align-center {
  align-items: center;
}

.space-between {
  justify-content: space-between;
}

<header id='header' class="flex align-center space-between">
  <h1>Obla Di Obla Da</h1>
  <nav id="nav">
    <a href="https://google.com">Evil</a> |
    <a href="https://duckduck.com">Not Yet Evil</a>
  </nav>
</header>

您经常看到的另一种方法是在 child 上使用 absolute position，将 top 设置为 50%，并将它的 transform X 转换为 -50%，虽然现在这种情况不太常见，因为 flex 的扩展和 ease-of-use，以及从文档流中删除元素所带来的固有问题.

.parent { position: relative; }
.vertical-child {
    position: absolute;
    top: 50%;
    transform: translateX( -50% );
}

将 header 内的所有内容与其基线垂直对齐？

Vertically align everything within header with it's baseline?

html

css

header

vertical-alignment

nav