Why does setting line-height the same as content height vertically center text?

Question

I'm trying to understand how the line-height property in CSS works. I know that it sets the spacing between lines of text. What I don't understand is why, when you set line-height the same as the height of the container, it vertically aligns the text. For example, if you did this:

.btn {
height: 22px;
line-height: 22px;
}

And create an element with the "btn" class, the text in that element will vertically align to the center and I don't understand why. To me, it makes more sense for the first line of text to appear at the very top of the container, and the second line to be at the bottom, possibly overflowing, since that will be 22px down. Can someone please tell me why it works this way, because I don't feel like I can understand the line-height property fully unless this is explained. Thank you.

score 0 · Accepted Answer · answered Aug 08 '16 at 04:26

0

line height is the amount of space above and below elements. thats pretty much all I can tell you.

answered Aug 08 '16 at 04:26

cup_of

5,033
5
27
67

But in my example, that would put 11 pixels above the line of text, not 22. – RyanW Aug 08 '16 at 04:29
yes it would but 11px above and below the text totaling 22px. line height of 22px doesn't add 22px to the top and bottom. it makes it so the total height of the line is 22px. since it gives 11px to the top of the line it essentially pushes the text 11px down, therefore centering the text. sorry if the explanation is hard to understand – cup_of Aug 08 '16 at 04:38
Ooooooh, I think I get it. line-height isn't "the space between text". It's the vertical size of the space that the text is printed on. Like, if I could write CSS for a sheet of standard notebook paper, the line-height property would be the amount of space between the blue lines, right? – RyanW Aug 08 '16 at 04:50

score 0 · Answer 2 · answered Aug 08 '16 at 04:29

0

If you wrap the text in a div, give the div a height, and the text grows to be 2 lines (perhaps because it is being viewed on a small screen like a phone) then the text will overlap with the elements below it. On the other hand, if you give the div a line-height and the text grows to 2 lines, the div will expand (assuming you don't also give the div a height).

Here is a link that demonstrates this

.shorty
{
    height: 12px;
}

.liney
{
    line-height: 25px;
}

answered Aug 08 '16 at 04:29

Shailesh

547
2
8
24

OK.. I understand that text will overflow out it is container if you specify a specific height for the container.. but I don't see how that answers my question. – RyanW Aug 08 '16 at 04:40

score 0 · Answer 3 · edited May 23 '17 at 10:29

Line height is actually referring to the top and bottom vertical spacing between the phrases. The reason why setting the same height as the line-height as it will auto centralise the invalid spaces. Sharing the similar explanation to centralising the body using margin {auto 0}

You can play with the examples available in w3schools. http://www.w3schools.com/cssref/tryit.asp?filename=trycss_line-height

Ref: http://www.w3schools.com/cssref/pr_dim_line-height.asp

It helps me to understand CSS3 syntax and attributes even more. I hope my share could help you. :)

Edited: I just happens to find a better answers to your question in here: How do I vertically center text with CSS?

Why does setting line-height the same as content height vertically center text?

3 Answers3