수직 정렬은 : 테이블 셀의 중간

Question

내 태그는 다음과 같습니다 위의 슬림

에

입니다

li 
    .wrapper 
    p = @album_count 
    h3 Albums 

내 스타일은 다음과 같습니다

li 
    +span-columns(3, 12) 
    +nth-omega(4) 
    position: relative 
    color: $body-text 

    h3 
    text-transform: uppercase 
    text-align: center 

    .wrapper 
    position: relative 
    display: table 
    display: block 
    width: 100% 
    height: 0 
    padding-bottom: 94.6% 
    +border-radius(50%) 
    border: 6px solid $white 
    border: remCalc(6px) solid $white 
    text-align: center 
    background-color: #266997 
    +box-shadow(inset 3px 3px 3px #0B5486) 
    +box-shadow(inset remCalc(3px) remCalc(3px) remCalc(3px) #0B5486) 

    &:after 
     content: '' 
     position: absolute 
     left: 10% 
     top: 10% 
     width: 80% 
     height: 80% 
     +border-radius(50%) 
     background-color: white 
     +box-shadow(3px 3px 3px #0B5486) 
     +box-shadow(remCalc(3px) remCalc(3px) remCalc(3px) #0B5486) 

    p 
     position: absolute 
     display: table-cell 
     width: 100% 
     height: 100% 
     vertical-align: middle 
     z-index: 10 

는 기본적으로, 나는이와 끝까지 .wrapper은 Compass Susy 열로 인해 특정 너비가되며 94 % 아래쪽 패딩으로 인해 높이가 동일하게됩니다. 그것은 h3 밑에 있기 때문에 94 %입니다. 이것은 내가 바꿀 것입니다 그러나 이것은 여기에 문제가 아닙니다.

내가 가지고있는 문제는 p입니다. 나는 그것을 절대적으로 배치하고 높이와 너비를 각각 100 %로 설정하여 서클 .wrapper 위에 올려 놓았습니다. 그건 잘 작동합니다. 그런 다음 .wrapper를 css 테이블로 표시하고 p를 css 테이블 셀로 표시하고 vertical-align : middle을 추가했습니다. 이것은 내가 아는 한 작동해야하지만,이 경우 전혀 변화가 없습니다.

누구든지 도움을 줄 수 있습니까?

Answer 1

참고 테이블 셀과 같은 절대 위치 요소가 표시되지

: relationships between 'display', 'position', and 'float' (CSS2.1 REC)

EDIT : .wrapper에 오타가 있습니까? 당신은 display을 포함하는 2 가지 지침을 가지고 있고 IE6/7과의 호환성을 이유로 모든 브라우저에 대해 블록으로 표시 한 다음 IE8 + 테이블로 표시하는 이유를 이해할 수 있습니다. 여기에서 .wrapper은 div (나는 생각합니다)이며 이미 차단했습니다. 기본값이며 다른 방법으로 작성되었습니다 (블록보다 테이블이므로 모두를위한 블록 임)