css - 行高百分比不起作用

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%，那么行高就不会生效(或者至少不会变成100%的div)。

Example jsfiddle

有人知道我做错了什么吗？

Answer 1

line-height: 100% 表示该元素字体大小的 100%，而不是其高度的 100%。事实上，行高总是相对于字体大小，而不是高度，除非它的值使用绝对长度单位(px、pt等)。