Html 如何在不知道高度的情况下使用线高度？

我一直在研究SO和google上的几个线程，它们说我可以在设置div的高度后使用line height使文本垂直对齐。但是，这需要您设置div的高度，这对响应性web设计来说不是很好吗？我试图在导航栏中对齐一行文本

一些示例代码：

<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元素中对齐徽标和下拉文本，但我没有在任何位置设置任何高度，因为我希望设计更容易适应屏幕分辨率

跨度在nav元素中，所以我想如果我将跨度设置为内联块元素，我可以对跨度执行“高度：100%”，但这不起作用

有没有办法让行高与高度一起工作，而不用手动指定跨度的高度（以像素为单位），这样我就可以得到一个尽可能响应的垂直对齐文本

---

我一直在考虑在css表中使用垂直对齐属性，但在这种情况下，我似乎还必须以像素为单位指定容器元素的高度。

这对您有用吗

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

.parent{
位置：相对位置；
背景颜色：蓝色；
宽度：100%；
高度：30vh；
}
.孩子{
位置：绝对位置；
顶部：50%；宽度：100%；
转化：translateY（-50%）；
背景色：红色；
}

你的随机文本。。。。。你的随机文本。。。。。

您可以以相对单位设置高度和线条高度（例如，

em

）？您也可以以数字（

线条高度：1.2；

）为单位进行设置，这与元素的字体大小有关=>我希望浏览器计算元素的高度，并据此调整线条高度，而不是硬编码。我确实看到w3c（）也在手动设置高度，所以我想可能没有办法做到这一点。但是手动设置高度似乎不是一个好的编码方式，我认为如果您例如调整屏幕分辨率或浏览器大小，可以自动调整高度/行高。请指定哪些问题和答案(“代码”>代码高度> <代码>属性，用于设置行的高度，从而在基线之间进行间隔；使用它进行垂直对齐是不可靠的欺骗。考虑描述（标题和问题本身）。你的原始问题和你解决它的最佳尝试，而不是一个假设的解决方案，甚至在你的例子中都没有用到。@Jukka：几乎在我看到的每个地方都有人使用线高度进行垂直对齐。举个例子，但也有一些类似的例子。我想我的问题很清楚，因为我问的是如何垂直对齐基本上是div中的文本，但不必手动设置高度，因为行高度似乎取决于行高度。我认为这是我见过的最好的方式（w3c建议这样做的方式也是如此）当我给孩子设定高度时，我想你是把它锁定在父母的高度上了，所以这对响应性设计来说应该不会太坏我会在我现在做不到的时候尝试一下如果你能接受我的答案，如果你现在能接受的话，那就太好了。我现在甚至不能在任何地方发表评论我一直在阅读transform属性以及您使用的视口高，我不知道，也没有机会回复您。我确实觉得内容溢出，除非您将min height:30vh改为height:30vh，但除此之外，我将很快对其进行测试。我不明白为什么它不以因为你绝对是将子对象定位在一个具有定义高度的父对象中，所以要进行转换。子对象几乎位于中心，但偏移了一点，你知道为什么吗？无论如何，你的答案解决了垂直居中问题，谢谢。我想我现在明白了：）似乎回答了这个问题。