Я пытаюсь понять, почему свойство CSS line-height помещает текст по вертикали в середине этой кнопки:
.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>Свойство line-height по существу устанавливает текстовую строку 29px (29 + 29 = 58) выше и ниже вашего текста "Полный заказ". Если вы добавили еще одну строку текста ниже, вы найдете ее 58px ниже этого текста. Вы устанавливаете высоту линии только для того, чтобы центрировать ваш текст посередине.
Вот хорошее слайд-шоу, которое поможет вам понять эту концепцию далее... line-height
И вот пример использования вашего кода, о котором я говорю: http://jsfiddle.net/YawDF/14/
Установив line-height на 58px, вы сообщаете обозревателю оставить половину этого выше и ниже текстовой строки, создавая разрыв "58 пикселей" между каждой строкой и только пробел "29 пикселей" над первой строкой.
SIDE ПРИМЕЧАНИЕ: Ваше использование vertical-align: middle бесполезно в коде, который вы показываете. Это можно сделать все вместе.
Текст, который вы создаете, находится в его собственном поле строки, а вертикальное выравнивание используется для размещения внутри этого поля. Однако это поле не имеет ничего общего с div, который вы обернули вокруг текста. Вы устанавливаете высоту div на 58 пикселей, но это не влияет на высоту текстового поля строки. Вот почему вам нужна линия-высота, чтобы соответствовать высоте div.
это по дизайну. Если синтаксический анализатор CSS (т.е. Браузер) не знает, насколько высок ваш текст, он не может вертикально выровнять текст правильно.
Обратите внимание, что существует значение по умолчанию для свойства line-height.
line-height определяет высоту текста, который делает абзац таким же аккуратным, что и выравнивание по вертикали по отношению к высоте строки, когда вы увеличиваете высоту линии, она увеличивает высоту, и вы можете более четко видеть эффекты вертикально- выравнивание текста
считают это записной книжкой, которую мы, дети, используем для обучения английскому языку в классе питомников
Всякий раз, когда абзац вставляется в разделение, расстояние между первой строкой и верхней границей div составляет половину высоты линии, т.е. если высота линии по умолчанию равна 1px, то расстояние между первой строкой и верхней частью -граница div равна 0.5px.
Если у вас есть деление с height:58px, расстояние между линией и верхней границей div равно 29px, а расстояние между линией и границей нижнего div будет = (общая длина div-distance b/w строка и верхняя граница), которая равна 58px-29px = 29px. Это приводит к тому, что линия выравнивается по вертикали в центре.
Кроме того, нет необходимости использовать vertical align:middle (для текста, содержащего не более одной строки), если вы используете высоту строки для централизованного выравнивания текста.