html - 使用 line-height 属性在父元素的垂直中间对齐元素

Question

我有以下代码:

div {
  border: 1px solid red;
  height: 100px;
  width: 300px;
}
span {
  display: inline-block;
  line-height: 100px;
}

<div>
  <span>Hey Align me in the middle</span>
</div>

如果保持 line-height 与父 div 的高度完全相同，则 span 对齐到中心。

假设我的父级 div 高度设置为 auto 的情况，在这种情况下，如果我想在父级中间显示跨度，我该怎么做？我想要一个仅使用 line-height 的解决方案，我可以通过其他方式实现。

我已经用 % 尝试了以下方法，但它似乎不起作用。

line-height: 100%;

但它与父级的 100% 不同，它是子级的 100% span，我怎样才能等于父级的高度。？

Answer 1

不，你不能那样做。 行高百分比与元素本身的字体大小有关，而不是容器的高度。

如果您仍想使用该技巧，则必须使用固定值，即 px，否则请参阅此帖子以获得更多选项 - How do I vertically center text with CSS?

注意，如果你这样做会更合理，这样当文本换行时它也有效。

div {
  border: 1px solid red;
  width: 100px;
  height: 100px;
  line-height: 100px;
}
span {
  display: inline-block;
  line-height: normal;
  vertical-align: middle;
}

<div>
  <span>Hey, align me in the middle.</span>
</div>

如果您知道文本肯定不会换行，它可以像这样简单。

div {
  border: 1px solid red;
  width: 100px;
  height: 100px;
  line-height: 100px;
}

<div>Hey, middle.</div>