如何在不知道高度的情况下使用 line-height？

Question

我一直在查看 SO 和 google 上的几个线程，它们说我可以在设置 div 的高度后使用 line-height 使文本垂直对齐。然而，这需要您设置 div 的高度，这对于响应式网页设计来说不是很好吗？我正在尝试对齐导航栏中的单行文本。

一些示例代码：

<nav>
  <section class="logo">
    <span>logo text</span>
  </section>
  <section>
    <ul>
      <li>link</li>
      <li>link</li>
      <li>link</li>
      <li>link</li>
    </ul>
  </section>
  <section class="dropdown">
    <span>dropdown</span>
  </section>
</nav>

.logo {
  display: inline-block;
}

.dropdown {
  display: inline-block
}

我需要在 span 元素内对齐徽标和下拉文本，但我没有在任何地方设置任何高度，因为我希望设计更容易适应屏幕分辨率。

跨度在导航元素内，所以我认为如果我将跨度设置为内联块元素，我可以在跨度上执行“高度：100%”，但这不起作用。

有什么方法可以让 line-height 与 height 一起工作，而无需手动指定跨度的高度（以像素为单位），这样我就可以获得尽可能响应的垂直对齐文本？

我也一直在研究将垂直对齐属性与 css 表一起使用，但看起来我在这种情况下也必须以像素为单位指定容器元素的高度。

Answer 1

这对你有用吗？

注意：我给父元素指定了 30vh 的高度，但它适用于任何/没有定义的高度。只是为了让您可以看到它是居中的。

.parent {
  position: relative;
  background-color:blue;
  width:100%;
  height:30vh;
}
.child {
  position: absolute;
  top: 50%; width:100%;
  transform: translateY(-50%);
  background-color:red;
}

<div class="parent"> 
    <div class="child">Your random text..... Your random text.....</div>
</div>