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

17 浏览
0 Comments

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

我一直在Stack Overflow和谷歌上看到一些帖子，说我可以在将div的高度设置为后使用line-height来使文本垂直对齐。然而，这需要设置div的高度，这对于响应式网页设计来说可能不太好。我正在尝试在导航栏中将单行文本对齐。\n一些示例代码：\n


.logo {
  display: inline-block;
}
.dropdown {
  display: inline-block;
}

\n我需要对span元素内的logo和下拉菜单文本进行对齐，但我没有在任何地方设置高度，因为我希望设计更容易适应屏幕分辨率。\nspan位于nav元素中，所以我认为如果将其设置为inline-block元素，我可以在span上执行\"height: 100%\"，但这并没有起作用。\n有没有办法在不手动指定span高度为像素的情况下，使line-height与height配合使用，以便获得尽可能适应屏幕的垂直对齐文本？\n我也一直在研究使用CSS表格的vertical-align属性，但在那种情况下，似乎我还必须手动指定容器元素的高度为像素。

0

1 答案

0 Comments

在上述内容中，讨论了如何在不知道高度的情况下使用 line-height 属性进行垂直居中。出现该问题的原因是在父元素中设置了高度，并且使用绝对定位将子元素垂直居中，但没有使用 line-height 属性。

解决方法是在父元素中设置高度，并使用绝对定位将子元素垂直居中，同时设置子元素的 line-height 属性等于父元素的高度。

具体代码如下：

 
    
Your random text..... Your random text.....





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

以上方法是根据网上的建议实现的，通过设置子元素的 line-height 属性等于父元素的高度，可以实现垂直居中效果。其中，通过设置父元素的高度为 30vh，可以看到子元素在父元素中垂直居中。

通过阅读链接joshbroton.com/...，还可以了解更多关于绝对定位和水平垂直居中的相关知识。

0