블럭요소 안에서의 이미지 세로정렬

마크업

<div>

<img src="#" />

</div>

스타일

div{width: 100px; height: 100px; line-height: 100px;}

img{vertical-align: middle;}

요 두가지 스타일 필요

내 경우는 div 가 각 리스트(li)요소안에 있어서

샵리스트를 쭉 나열하는 상황이었다.

샵로고의 크기가 각각 다르기 때문에 div 안에서의 이미지가 가로 세로 정렬이 필요한 상황.

백그라운드 이미지를 깔고, width, height를 백그라운드 넓이,높이만큼 고정.

그다음 line-height 를 div 높이와 동일하게 부여.

img 에 vertical-align : middle ;

일단 문제 해결.

ie9 이하버전에는 지원하지 않는다는 말이 있음.

무시함.

파폭, 크롬, 오페라, ie9 이상 버전 테스트에 문제없음.

어차피 모바일코딩.

다른건 무시가능한 상황.