Alex Rivera | Logout

How does line-height vertically center text?

Asked 2012-01-10T05:58:06.287
28

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>

html css vertical-alignment
Edit
Report

1 Answer

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

answered 2012-01-10T06:26:52.913

Your Answer