My Head Hurts My Head Hurts - 3 months ago 10
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:


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

.bar img {
vertical-align: middle;


<div class="bar">
<img src="" alt="Foo Image" />

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