div 안에 사이즈 알 수 없는 개체 세로 정렬하기 css

div.thumb {    
    background: #eee;
    width: 150px;
    height: 90px;
    text-align: center;
    _font-size:100px;
    line-height:90px;
    overflow:hidden;
}

div.thumb:after {
    content: " ";
    margin-left: -0.6em;
    white-space: pre;
}

div.thumb img {
     vertical-align: middle;
}

</style>

<div class="thumb">

 <img src="http://jvod.jjanglive.com/jjangpod/2011/10/22/12/12/1319253153085/thumbA_167.png" alt="다스베이더">

</div>

가이드 영역의 height와 line-height의 값을 일치시킴으로써 간단히 해결할 수 있다.
ie6에서 적용하기 위한 팁으로, _fonz-size:00(height 값과 동일)로 처리할 수 있다.

덧글

댓글 입력 영역