CSS - Line height property, how it works (simple)
alignment, css, html, vertical-alignment
Solution
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.
Problem
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!!