텍스트 정렬에 관한 문제 2
CSS 2011. 2. 14. 15:08완벽한 해결은 아니지만...ie7 이하버전에서 해결했기에 올려본다.
<div class="userTab">
<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이하버전에서 해결책은 위 빨간색. 포지션으로 해결.
위 이미지 탭 부분 텍스트가 가로세로 중앙정렬로 나오게 된다.
<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이하버전에서 해결책은 위 빨간색. 포지션으로 해결.
위 이미지 탭 부분 텍스트가 가로세로 중앙정렬로 나오게 된다.
'CSS' 카테고리의 다른 글
대체 텍스트 안보이게 하기 (0) | 2011.04.06 |
---|---|
css3 라운드박스 (0) | 2011.04.05 |
텍스트 세로 중앙 정렬에 관한 문제. (0) | 2011.02.14 |
css 텍스트 말줄임 (1) | 2011.01.04 |
텍스트 줄바꿈 처리 word-break, white-space (0) | 2011.01.04 |