使用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>

​

如果保持行高与父div的高度完全相同，span将对齐到中心。

假设我的父分区高度设置为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>

​

Answer 2

如果要避免使用line-height，可以使用transform: translateY(-50%)或display: table和display: table-cell

.element {
   position: relative;
   top: 50%;
   transform: translateY(-50%);
}

.container {
   height: 300px;
   width: 200px;
   background-color: red;
}


.fake-table{ display: table; height: 300px; }
.fake-td{display:table-cell ;vertical-align: middle }

请参阅live example。

Answer 3

答案很简单。因为line-height严格地引用inline elements，所以您需要将内容框视为内联文本。

这里我们有两个div，一个包装器和一个内容：

<div class="wrapper">
    <div class="content"> Some stuff</div>
</div>

所以，首先，我们需要为wrapper元素设置一个高度，让我们将其高度设置为600px。为了让我们的vertical-align正常工作，我们还需要给它一个line-height: 600px，注意它和div的高度一样。(如果有动态添加的东西，您可以使用javascript来完成此部分)。

我们应该给它一些属性，让它更可见，所以我们要给它添加一个边框。哦，我们也希望内容居中，所以我们给它一个center的text-alignment

.wrapper{
   height: 600px;
   border: solid 1px black;
   line-height: 600px;
   text-align: center;
}

接下来，我们将处理实际内容本身。首先，我们需要告诉浏览器它是一个display: inline-block;，这是您想要的：vertical-align: middle。之后，我们将给它一个height: 200px，并给它一些与众不同的特性，所以border: solid 1px black;应该可以做到这一点。最后但并非最不重要的一点是，我们需要重置它将从父对象(text-align: center; line-height: normal)继承的一些内容。

/* enter code here */

.content{
    display: inline-block;
    text-align: left;
    line-height: normal;
    height: 200px;
    border: solid 1px black;
    vertical-align: middle;
    width: 200px;
}

您可以看到工作产品here