line-height占不起作用的百分比

Question

我遇到线高的问题,我无法理解.

以下代码将图像置于div中:

CSS

.bar {
    height: 800px;
    width: 100%;
    line-height:800px;
    background-color: #000;
    text-align: center; 
}

.bar img {
    vertical-align: middle;   
}

HTML

<div class="bar">
    <img src="http://27.media.tumblr.com/yHWA4oxH870ulxnoH7CkOSDR_500.jpg" alt="Foo Image" />
</div>

但是,如果我将行高改为100%,则行高不会生效(或者至少不会成为div的100%).

示例jsfiddle

有谁知道我做错了什么？

Answer 1

line-height: 100%表示该元素的100%字体大小,而不是其高度的100%.实际上,线高度总是相对于所述字体大小,而不是高度,除非其值使用绝对长度(单位px,pt等).

Answer 2

我知道这个问题很老,但我发现对我来说是完美的解决方法.

我将此css添加到我想要居中的div中:

div:before {
  content: "";
  display: inline-block;
  height: 100%;
  vertical-align: middle;
}

这每次都很有效,很干净.

编辑:为了完成,我使用scss,我有一个方便的mixin,我包括在每个直接孩子我想要垂直居中的父母:

@mixin vertical-align($align: middle) {
  &:before {
    content: "";
    display: inline-block;
    height: 100%;
    vertical-align: $align;
    // you can add font-size 0 here and restore in the children to prevent
    // the inline-block white-space to mess the width of your elements
    font-size: 0;
  }
  & > * {
    vertical-align: $align;
    // although you need to know the font-size, because "inherit" is 0
    font-size: 14px;
  }
}

完整的解释: div:before将在div中添加一个元素,但在它的任何子代之前.使用:before或:after我们必须使用content:声明否则不会发生任何事情,但为了我们的目的,内容可能是空的.然后我们告诉元素与其父元素一样高,只要定义其父元素的高度并且该元素至少是内联块.vertical-align定义与父相关的自我的垂直位置,而不是以text-align不同的方式工作.

该@mixin声明适用于sass用户,它将像这样使用:

div {
    @include vertical-align(middle)
}

Answer 3

当您使用百分比作为行高时,它不是基于div容器,而是基于字体大小.

Answer 4

line-height:100%是一个简单的垂直居中元素的方法,如果它是相对于容器计算的,但这太容易了,因此它不起作用.

所以相反,它只是说行高的另一种方式:1em(对吧？)

垂直居中元素的另一种方法是:

.container {
     position:relative;
}
.center {
     position:absolute;
     top:0; left:0; bottom:0; right:0;
     margin: auto;
     /* for horiz left-align, try "margin: auto auto auto 0" */
}

Answer 5

可能不是很漂亮,但它的工作和它的语义;

<div class="bar" style="display: table; text-align: center;">
    <img style="display: table-cell; vertical-align: middle;" src="http://27.media.tumblr.com/yHWA4oxH870ulxnoH7CkOSDR_500.jpg" alt="Foo Image" />
</div>

display:table-cell给一个元素唯一的表ablillity来对齐verticaly(至少我认为它是唯一的)

Answer 6

这是一个非常晚的答案,但在现代浏览器中,假设父元素也是屏幕高度的100%,您可以使用vh视口单元. 小提琴

line-height: 100vh;

浏览器支持