display : table-cell confusion

Question

래퍼 div 요소에 28 개의 링크가 있습니다. 각 하나는 알파벳 글자와 숫자에 대한 # 그리고 "모두"에 대한 것입니다. 각각 왼쪽으로 뜬다. 텍스트를 가로 및 세로로 가운데에 맞춰야합니다. 아래 코드를 사용하면 가로로 가운데 정렬되어 있지만 세로 맞춤 : 중간에 표시가있는 요소 인 표 셀을 사용할 수있을 때 중간에 아무런 효과가없는 것처럼 보입니다. 누구든지 아이디어가 있습니까?

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

나는 수직으로 중앙에 선 높이 속성을 사용합니다. 다른 속성과 충돌하고 브라우저가 무시하기 때문에 세로 정렬이 거의 작동하지 않는 것으로 나타났습니다.