时间戳

首页 > 解决方案 > 如何从容器的 % 高度确定行高？

html - 如何从容器的 % 高度确定行高？

问题描述

在经典布局（页眉固定，主要和页脚固定）中，我想将主要元素的文本居中。出于本练习的目的，我想设置 line-height 使其等于主元素的高度，然后文本将垂直居中。绝对定位的主元素具有 10% 的顶部和底部填充，因此它是 80% 高。

如何使行高等于容器高度？

*    { box-sizing: border-box; }
html {     height:       100%; }
body {     margin:          0; 
        font-size:       10px; }

header { border: 1px solid black;
    position: fixed;
    top: 0;
    height: 10%;
    left: 0;
    right: 0;
}

main { border: 1px solid black; left: 0; right: 0;
    position: absolute;
    top: 10%;
    /* height: 80%; */
    bottom: 10%;
    line-height: 80%;
}

footer { border: 1px solid black;
    position: fixed;
    height: 10%;
    left: 0;
    right: 0;
    bottom: 0;
}
        <header>Header</header>
        <main><div>Main Div</div></main>
        <footer>Footer</footer>

标签： htmlcss

解决方案

您可以使用带有伪的旧技巧并将div集合作为inline-block元素和vertical-align. 伪是主高度的 100%，因为它是一个通过坐标调整大小的绝对元素，伪应该采用height:100%;

下面的演示

* {
  box-sizing: border-box;
}

html {
  height: 100%;
}

body {
  margin: 0;
  font-size: 10px;
}

header {
  border: 1px solid black;
  position: fixed;
  top: 0;
  height: 10%;
  left: 0;
  right: 0;
}

main {
  border: 1px solid black;
  left: 0;
  right: 0;
  position: absolute;
  top: 10%;
  /* height: 80%; */
  bottom: 10%;
}


/* centering trick */

main::before {
  content: '';
  height: 100%;
}

main:before,
main>div {
  vertical-align: middle;
  display: inline-block;
}


/* end centering trick */

footer {
  border: 1px solid black;
  position: fixed;
  height: 10%;
  left: 0;
  right: 0;
  bottom: 0;
}
<header>Header</header>
<main>
  <div>Main Div</div>
</main>
<footer>Footer</footer>

但这真的不是办法，这个例子也不会教你任何有用的东西，今天你可以轻松地使用 flex 或 grid 模型来避免棘手的方法.....

忘记line-height这种视觉效果，这不是行高的工作，也不是使用它的方式。行高：80%；表示 1em 的 80%（字体大小设置）。

推荐阅读