行高作为百分比不工作 [英] line-height as a percentage not working

问题描述

以下代码会将图片置于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.jpgalt =Foo Image/> 
< / div> 
  

但是，如果我将行高更改为100％，那么行高不会生效或至少不会成为div的100％）。

示例jsfiddle

有人知道我在做什么吗？

解决方案

p> line-height：100％表示该元素的字体大小的100％，而不是其高度的100％。事实上，行高度总是相对于字体大小而不是高度，除非其值使用绝对长度单位（ px ， pt 等）。

I am having an issue with line-height that I cannot quite get my head around.

The following code will center an image within a 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>

However, if I change the line height to 100%, then the line height does not take effect (or at least does not become 100% of the div).

Example jsfiddle

Does anyone know what I am doing wrong?

解决方案

line-height: 100% means 100% of the font size for that element, not 100% of its height. In fact, the line height is always relative to the font size, not the height, unless its value uses a unit of absolute length (px, pt, etc).

这篇关于行高作为百分比不工作的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！