이미지 항상 수직으로

[이미지 항상 수직으로]

img 태그를 수직에 가로로 하고싶은경우가 종종 있다. 

테이블을 사용하면 td안에서 자동으로 vertical-align:middle이 적용되는데 그냥 div요소에서는 안된다. 

그렇다고 img에  vertical-align:middle을 해도 안먹히는 경우... 

다음 요소를 추가하여 사용하면 좋을거같다. 

<div class='box'>

<span class='helper'></span>

<img src='/이미경로'/>

</div>

이미지 태그만 쓰는게 아니라 감싸주는 div를 넣고 그안에 span태그를 사용한다. 

번거롭긴 하지만... 일단 보여지는게 중요하니 ^^;;;

css는 다음과 같이 적용하면 된다. 

<style>

.box{width:100px;height:100px;text-align:center}

.box .helper{display:inline-block;height:100%;vertical-align:middle}

.box img{vertical-align:middle}

</style>