27

I'm trying to understand why the line-height CSS property places the text vertically in the middle of this button:

.btn-order {
    width: 220px;
    height: 58px;
    font-size: 24px;
    padding: 0;
    text-align: center;
    vertical-align: middle;
    line-height: 58px;
    border: 1px solid black;
}
<div class="btn-order">Complete Order</div>

3
  • 8
    @BoltClock line-height is a rule for appearance editing, not necessarily for vertically aligning within a button. He is asking why this technique of centering text inside a button works. Commented Jan 10, 2012 at 6:49
  • Depending on what I'm doing, I sometimes use padding: jsfiddle.net/YawDF/19 - Dunno if it's fitting in your case given that you have width and height set, but for future reference.
    – Joonas
    Commented Jan 10, 2012 at 7:16
  • "why we must put line-height in this case?" - Well, you don't need it: jsfiddle.net/YawDF/20. In fact, your CSS is very rigid, you rarely need to set absolute width and height like that.
    – Mog
    Commented Jan 10, 2012 at 7:29

5 Answers 5

20

The line-height property is essentially setting a 29px (29 + 29 = 58) text line above and below your text, "Complete Order". If you added another line of text below this you will find it 58px below this text. You are putting line-height here only to center your text in the middle.

Here is a good slide show to help you understand this concept more... line-height

And here is an example using your code of what I am talking about: http://jsfiddle.net/YawDF/14/

By setting the line-height to 58px you are telling the browser to leave half this above and below the text line, creating a '58px' gap between each line and only a '29px' gap above the first line.

SIDE NOTE: Your use of vertical-align: middle is useless in the code you are showing. This can be taken out all together.

13
  • It's not true that vertical-align:middle is only for tables. Here is a simple demo of vertical-align working without tables: jsfiddle.net/YZUTM
    – Alohci
    Commented Jan 10, 2012 at 8:10
  • @Alohci No, Michael meant that the vertical-align in the OP's fiddle was useless, because it wouldn't do anything in that case. vertical-align works very different in table cells than it does everywhere else. Michael's wording is not very clear though...
    – Mr Lister
    Commented Jan 10, 2012 at 8:30
  • @MrLister - Indeed. The sentence is at best misleading. It needs some sort of clarification.
    – Alohci
    Commented Jan 10, 2012 at 8:43
  • @Alohci if you look at your updated fiddle, jsfiddle.net/YZUTM/7, you will see your middle no longer works. The only reason it was working before was because you had a line-height set to your parent element, as well as text-align: center. Please show me an instance where vertical-align: middle; works without working with tables. Thanks. Commented Jan 10, 2012 at 15:30
  • @Alohci correction... NONE of your alignments work without the added CSS you used. Take out the vertical alignment and you get the same affect. jsfiddle.net/YZUTM/15 Commented Jan 10, 2012 at 15:33
1

Whenever a paragraph is inserted in a division the distance between the first line and the top border of the div is half of the line-height i.e if the default line- height is 1px then the distance between the first line and the top-border of the div is 0.5px.

If you have a division with height:58px the distance between the line and the top-border of the div is 29px and the distance between the line and the border of the bottom div would be=(total div height-distance b/w the line and the top border) which is 58px-29px=29px.This results in the line being vertically aligned at the center.

Also,there is no need to use vertical align:middle(for text containing not more than one line) if you're using line-height to centrally align the text.

0

it is by design. If the CSS parser (i.e. the browser) doesn't know how tall is your text, he can't vertical align your text correctly.

Note there is a default value of line-height property.

0

line-height defines the height of text which make the paragraph looks neat so vertical-align works with respect to line-height when you increase the line height it increases the height and the you can more clearly see the effects of vertical-alignment of text

think this as a notebook which we children use to learn English -writing in nursery class

2
  • 1
    It does not. It defines the height of the inline box the text resides in, not the height of the text itself.
    – Rob
    Commented Jan 10, 2012 at 15:46
  • sorry for my bad english but i too mean this Commented Jan 10, 2012 at 17:37
0

The text you generate is inside its own line box and vertical-align is used for placement inside that box. However, that box has nothing to do with the div you have wrapped around the text. You set the height of the div to 58px but that does not affect the height of the line text box. That is why you need line-height to match the height of the div.

3
  • 1
    "...placement inside that box". Not quite. vertical-align is used for placement of inline boxes within the line boxes that each inline box spans. Strictly, CSS 2.1 says "On a block container element whose content is composed of inline-level elements, 'line-height' specifies the minimal height of line boxes within the element.
    – Alohci
    Commented Jan 10, 2012 at 21:24
  • @Alohci - You are mis-reading that. What you quote is for line boxes inside a block level element. I'm strictly speaking about the line boxes themselves.
    – Rob
    Commented Jan 10, 2012 at 22:03
  • 1
    Your answer talks of inline boxes not line boxes. Your comment talks of line boxes. They're very different things. You need to be clearer which you are referring to.
    – Alohci
    Commented Jan 11, 2012 at 0:19

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.