Question

我正在努力将文字垂直对齐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;组合，但这并没有奏效。

编辑：

我也有一个问题：为什么行高：100％不起作用？

请帮忙！

Answer 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;
}

＆＃13;

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%;
}

＆＃13;

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

＆＃13;

Answer 2

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

line-height相对于元素的字体大小。请参阅this。

因此，如果您希望'.header span'的高度和行高相同，则可以获取computed height in javascript，然后将其设置为行高：

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

Answer 3

只需使用line-height

即可

<强> CSS

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

DEMO HERE

将内嵌块脊柱内的文本与父容器高度垂直对齐，单位为

3 个答案: