CSS - Line height property, how it works (simple)

Question

So in this simple example I have as final result:

This is a very simple question but I simply can't get my head around it.

To achieve the vertical centering of the numbers I used:

line-height:100px;

Which works great and have been doing it trial and error basis.

My question is specifically why the line-height:50px; just gets if half of the way.

If the small div has a height of 100px and I an positioning relative to it, shouldn't the half of it center it to the half.

This specially puzzles me since, when I center a div:

I would use: margin:50px 0 0 50px; to get this:

---

I realize this question might be an overkill since the answer might be (probably will be very simple), so sorry! but I guess it is better the "why doesn't this work" questions ;)

Thanks in advance!!

Answer 1

The simple answer is that with line-height the character will be in the vertical middle of the line, so a line with a height of 100px has the text in the middle of, thus 50px.

Answer 2

Ok I'm quite sure I got it now, I'll answer my own question, thanks to all you answers this would be a more graphical explanation (which always helps me):

This is just a complement to jarret's answer (the first one to nail it IMHO)

Thanks for all the helpful answers

BTW: Sorry for the horrid artwork.

Answer 3

I think line-height is just what is sounds like. It would be different if it was just half of the height, as you would have to account for the font-size, etc. line-height just makes a blocky thing with a height of 100px, in your case, and centers the text within that.

Basically, line-height adds the value ((desired height) - (font-size)) / 2 to the top and bottom of the text, while adding margins does not account for that.

Answer 4

Using the line-height property to 100px means that the text is going to be vertically centered in the middle of a line with a 100px height. Meaning it will be placed around 50px. Setting the margins to 50px will give you a similar result but you might notice its not exactly centered.

Answer 5

Essentially the line-height helps to set the "leading" and "half-leading". The 100px accounts for the total height of the element and the text is being "vertically aligned" within that area. Half is going above and half below.

This explains better than I. http://www.w3.org/TR/CSS2/visudet.html#line-height

Answer 6

Already been answered, but I thought I might add that the formula is usually is:

The difference between line-height and font-size is called Leading. Then divide this Leading by 2 to get half-leading, which is put above and below your text causing it to be vertically centered.

The following set of slides will explain a lot about line-height. You can start at slide 72 for what I explained above, but I would recommend going through the whole set.

Answer 7

This doesn't work because line-height is specific to text and not to actual heights of elements like divs. I would suggest using height and not line-height when your subject is not in fact text.

Answer 8

When you give an element a line-height of 100% (in your example, this equates to 100px), the text is placed in the middle vertically of a line that's 100px tall.