Вертикальное выравнивание по центру строки -Тег привязки блока

Мне нужно, чтобы мои ссылки и кнопки выглядели одинаково, но я не смог вертикально выровнять текст внутри тега "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 ниже:

http://jsfiddle.net/bZsaw/3/

Как видите, я могу заставить его работать с комбинацией тега 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.

11
задан Kara 14 January 2014 в 06:29
поделиться