header 中的 inline-blocks 个元素垂直居中

Question

在 header 顶部横幅中：

#header { background-color: #eaeaea; } 
#header a { display: inline-block; margin-right: 1.5em;  }
.logo { margin-right: 6em; }

<div id="header">
<img src="https://via.placeholder.com/150x120" class="logo">
<a href="">Lorem</a>
<a href="">Ipsum</a>
<a href="">Contact</a>
</div>

如今将横幅内的 3 个右侧链接垂直居中的主要方法是什么？

我知道如何用 position: relative; top:-...px 或类似的方法甚至 <table> 来做，但是现在什么方法被认为是最合适的方法，尤其是响应式设计？

您会为此使用 flex 功能吗？如果可以，怎么做？

我还想将 3 个链接组粘贴到屏幕的右边框，这样，如果我们调整浏览器宽度，它始终会沿右边框浮动。我正要使用 float: right 但可能有比混合使用 flex 和 float?

更好的解决方案

PS：这些最后的细节不在链接的问题中 Flexbox: center horizontally and vertically and How to Vertical align elements in a div?，因此它不是重复的。

Answer 1

我个人会使用 flex 和 align-items:center 进行响应式设计。

见下方代码:

#header{ 
  background-color: #eaeaea; 
  display:flex;
  align-items:center;
  justify-content:space-between;
} 
#header a{ 
  display: inline-block;
  margin-right: 1.5em;
}
.logo{
  margin-right: 6em;
}

<div id="header">
  <img src="https://via.placeholder.com/150x120" class="logo">
  <div id="links">
    <a href="">Lorem</a>
    <a href="">Ipsum</a>
    <a href="">Contact</a>
  </div>
</div>

Answer 2

当涉及到文本和项目的垂直居中时，这个技巧就派上用场了：

#header {
   display: flex;
   align-items: center;
}

更可靠（虽然复杂）的方法是使用网格包装器

.center {
   display: grid;
   grid-template-areas: 'a b c';
   grid-template-rows: 1fr max-content 1fr;
}
.center > * {
   grid-area: b
}

<div id="header">
  <img src="https://via.placeholder.com/150x120" class="logo">
  <a class="center" href=""><span>Lorem</span></a>
  <a class="center" href=""><span>Ipsum</span></a>
  <a class="center" href=""><span>Contact</span></a>
</div>

Answer 3

如果您不关心旧浏览器 (IE)，您可以使用 place-items，而不是 align-items。

#header{ 
  background-color: #eaeaea; 
  display: flex;
  place-items: center;
} 
#header a{ 
  display: inline-block;
  margin-right: 1.5em;
}
.logo{
  margin-right: 6em;
}

<div id="header">
  <img src="https://via.placeholder.com/150x120" class="logo">
  <a href="">Lorem</a>
  <a href="">Ipsum</a>
  <a href="">Contact</a>
</div>

引用自https://developer.mozilla.org/en-US/docs/Web/CSS/place-items：

The CSS place-items shorthand property allows you to align items along both the block and inline directions at once (i.e. the align-items and justify-items properties) in a relevant layout system such as Grid or Flexbox. If the second value is not set, the first value is also used for it.

header 中的 inline-blocks 个元素垂直居中

Vertically center inline-blocks elements in header

css

flexbox

responsive-design