Мне нужно, чтобы мои ссылки и кнопки выглядели одинаково, но я не смог вертикально выровнять текст внутри тега "a" таким же образом, как тег "кнопка". Важно отметить, что теги должны иметь возможность обрабатывать несколько строк текста (, поэтому высота строки -не будет работать ).
a,button {
display: inline-block;
-moz-box-sizing: border-box;
width: 150px;
height: 150px;
vertical-align: middle;
border: 1px solid #000;
text-align: center;
}
См. jsfiddle ниже:
Как видите, я могу заставить его работать с комбинацией тега span внутри и установки "display :table" на "a" и настройки "display :таблица -ячейка» и «вертикальное -выравнивание :по середине» для диапазона, но это не работает в IE7.
a,button {
width: 150px;
height: 150px;
border: 1px solid #000;
text-align: center;
}
a {
display: table;
-moz-box-sizing: border-box;
}
a span, button span {
vertical-align: middle;
text-align: center;
}
a span {
display: table-cell;
}
Ищу простое решение только с помощью CSS.