标题中的垂直居中内联块元素[重复]答案

【问题标题】：Vertically center inline-blocks elements in header [duplicate]标题中的垂直居中内联块元素[重复]
【发布时间】：2020-12-22 20:32:40
【问题描述】：

在标题顶部横幅中：

#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和How to Vertical align elements in a div?中，因此它不是重复的。

【问题讨论】：

标签： css flexbox responsive-design

【解决方案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>

【讨论】：

很好的解决方案，感谢@KevRob。你知道如何将这组 3 个链接粘贴到屏幕的右边框，这样，如果我们调整浏览器的宽度，它总是沿着右边框保持浮动？在保持flex 的同时这可能吗？我正要使用float: right，但可能有比混合flex 和float 更好的解决方案？
是的，有很多解决方案。我也会将链接放在带有display:flex 的div 中，并将这个css 添加到'#header'：justify-content : space-between。告诉我它是否适合你。
很棒的@KevRob，它有效；我编辑了您的答案以包含它，现在很完美！

【解决方案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>

【讨论】：

你知道@HarrisonSmith 如何将这组 3 个链接粘贴到屏幕的右边框，这样，如果我们调整浏览器的宽度，它总是沿着右边框保持浮动？在保持flex 的同时这可能吗？我正要使用float: right，但可能有比混合flex 和float 更好的解决方案？
@Basj 你所说的“组”是什么意思我只看到一组 3 个链接。

【解决方案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:

CSS place-items 速记属性允许您在相关布局系统（如 Grid 或 Flexbox）中同时沿块方向和内联方向对齐项目（即 align-items 和 justify-items 属性）。如果没有设置第二个值，则也使用第一个值。

【讨论】：