텍스트 정렬에 관한 문제 2

완벽한 해결은 아니지만...ie7 이하버전에서 해결했기에 올려본다.


<div class="userTab">    

    <ul>
     <li class="on"><span><a href="#">국회의사당</a></span></li>
     <li><span><a href="#">한국방송공사</a></span></li>
     <li><span><a href="#">여의도공원</a></span></li>
     <li><span><a href="#">증권선물거래소</a></span></li>
     <li><span><a href="#">63빌딩</a></span></li>
    </ul>
</div>

/* 공용 */
.userTab {float:left; width:32px; margin-right:3px;}
.userTab li {height:134px; padding:0 3px; text-align:center; margin-bottom:1px; background:url('../images/layout/user_tab_off.gif') no-repeat; font-size:15px; font-weight:bold;}
.userTab li a {color:#c0c8d3; cursor:pointer;}
.userTab li.on{background:url('../images/layout/user_tab_on.gif') no-repeat;}
.userTab li.on a {color:#fff;}
.userTab li span {display:table-cell; height:134px; vertical-align:middle;}

/* ie7 전용을 만들었다. ie6 도 주석처리해서 넣어주면 될듯. */

.userTab li {position:relative; margin:0; padding:0; height:133px;}
.userTab li span {position:absolute; left:2px; top:50%; width:26px; height:auto !important;}
.userTab li span a {position:relative; top:-50%;}

ie7이하버전에서 해결책은 위 빨간색. 포지션으로 해결.

위 이미지 탭 부분 텍스트가 가로세로 중앙정렬로 나오게 된다.