My Head Hurts My Head Hurts - 4 months ago 14
CSS Question

line-height as a percentage not working

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?

Answer

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).

Comments