Question

我一直在寻找SO和谷歌上的几个主题，它们说我可以在设置div的高度后使用行高，使文本垂直对齐。但是，这需要您设置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元素中对齐徽标和下拉文本，但我没有任何高度设置，因为我希望设计更容易适应屏幕分辨率。

跨度是在nav元素内部，所以我认为如果我将它设置为内联块元素但是它不起作用，我可以在跨度上执行“height：100％”。

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

我一直在考虑使用带有css表的vertical-align属性，但看起来我也必须指定容器元素的高度（以像素为单位）。

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>

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

1 个答案: