Почему задав vertical align: top содержимое кнопки с классом .btn “Заказать” выравнивается по центру кнопки?
.btn {
display: inline-block;
width: 146px;
word-wrap: break-word;
font: inherit;
text-align: center;
border-radius: 2px;
padding: 10px;
vertical-align: top;
color: #a38b70;
text-transform: uppercase;
text-decoration: none;
border: 2px solid #a38b70;
}
Vertical-align: top; влияет не на надпись внутри кнопки, а на саму кнопку. Это свойство относится к общим для кнопок и предназначено для случаев, когда на одной строке такие кнопок две и более. Надписи на кнопках могут быть разные (одно слово, несколько слов). Свойство vertical-align выравнивает их, чтобы кнопки располагались на одном уровне независимо от размера.
Спасибо! А если все-таки понадобиться выровнять текст внутри кнопки его нужно будет обернуть в еще один блочный или блочно-строчный див и задать уже ему vertical-align?
Текст на кнопках чаще всего выравнивают с помощью одинаковых внутренних отступов или еще line-height.
Спасибо!