display: table-cell confusion

Question

У меня есть набор из 28 ссылок в элементе div обертки. Каждый из них представляет собой букву алфавита плюс # для числового и одно слово «все». Каждый из них плавает влево. Я хочу, чтобы текст был центрирован по горизонтали и по вертикали. С приведенным ниже кодом я располагаю его по горизонтали, но выравнивание по вертикали: среднее, похоже, не имеет никакого эффекта, когда я ожидал, что это будет так, как вы можете использовать это на элементах, которые имеют отображение: table-cell. У кого-нибудь есть идеи?

a { 
    float: left; 
    position: relative; 
    display: table-cell; 
    width: 30px; 
    height: 30px; 
    margin: 0 4px 4px 0; 
    @include border-radius(4px); 
    text-align: center; 
    vertical-align: middle; 
    text-decoration: none; 
    color: #fff; 
    @include blue-gradient; 

    &:nth-of-type(14n) { 
    margin-right: 0; 
    } 

    &:hover { 
    top: -1px; 
    } 
} 

С наилучшими пожеланиями, Нил

Answer 1

Вы могли бы использовать:

line-height: 30px; 

Answer 2

Я хотел бы использовать свойство высоту строки по центру вертикально. Я нашел вертикальное выравнивание редко работает, потому что он конфликтует с другими свойствами, и браузеры игнорируют его.