将内联块脊柱内的文本与父容器高度垂直对齐（百分比）答案

【问题标题】：Vertically align a text inside a inline-block spine with parent container height in percentage将内联块脊柱内的文本与父容器高度垂直对齐（百分比）
【发布时间】：2016-08-05 20:45:22
【问题描述】：

我正在努力垂直对齐 display: inline-block 跨度旁边的文本。

这个span 位于一个容器内，该容器的高度设置为其包装容器的百分比：

<div class="wrap">
    <div class ="header">
        <span>test</span>
    </div>
</div>

和css：

html, body {
    height:100%;
    max-height: 1440px;
    max-width: 1920px;
}

.wrap {
    width: 100%;
    height: 100%;
    max-width: 1920px;
    min-width: 1024px;
    max-height: 1440px;
    min-height: 768px;
    background: green;
}

.header {
   background: yellow;
   height: 4.44%;
}

.header span {
  display: inline-block;
  line-height:100%;
  height: 100%;
  vertical-align: middle;
  background: orange;
}

这里是Fiddle

我也尝试了 display:table; 和 display:table-cell; 的组合，但没有奏效。

编辑：

我还有一个问题：为什么 line-height:100% 不起作用？

请帮忙！

【问题讨论】：

标签： html css center vertical-alignment

【解决方案1】：

Flexbox 可以做到这一点。

.header span {
  display: -webkit-inline-box;
  display: -webkit-inline-flex;
  display: -ms-inline-flexbox;
  display: inline-flex;
  height: 100%;
  -webkit-box-align: center;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
  background: orange;
}

html, body {
    height:100%;
	max-height: 1440px;
	max-width: 1920px;
}

.wrap {
    width: 100%;
    height: 100%;
    max-width: 1920px;
    min-width: 1024px;
    max-height: 1440px;
    min-height: 768px;
    background: green;
}

.header {
   background: yellow;
   height: 4.44%;
}

.header span {
  display: inline-flex;
  height: 100%;
  align-items: center;
  background: orange;
}

.mainbody {
  background: red;
  height: 80%;
}

.footer {
  background: blue;
  height:10%;
}

<div class="wrap">
<div class ="header">
<span>test</span>
</div>
</div>

【讨论】：

应该...IE10支持flexbox（我认为是前缀）。
前缀是什么？我找到了display: -ms-flexbox;和-webkit-flex: 1;，你能帮我把它们加到jsfiddle，不知道怎么用吗？

【解决方案2】：

>> 我还有一个问题：为什么 line-height:100% 不起作用？

行高百分比是相对于元素的字体大小的。参考this。

所以，如果你想让'.header span'的高度和行高相同，你可以得到computed height in javascript，然后将其设置为行高：

let divElement = document.getElementById('divId');
let height = document.defaultView.getComputedStyle(divElement).height;
divElement.style.lineHeight = height;

【讨论】：

【解决方案3】：

只需使用line-height

CSS

.header span {
  display: inline-block;
  line-height:2.2em;
}

DEMO HERE

【讨论】：

我在我的代码中试过这个，当标题缩小时，文本不再居中对齐。跨度也不是父 div 高度的 100%，除非我再次设置高度 100%