CSS와 Javascript을 이용한 이미지 중앙 정렬 (paddingTop)

DIV에 이미지를 좌,우 상하 정렬하고 싶을 때가 있다.

해당 방법은 간단하지만, 쉽게 구현하는 방법이다.

CSS와 Javascript을 이용한 방법입니다.

이미지 CSS + Javascript

<style> .mainBtn { min-width: 120px; } .mainImg { width: 122px; max-height: 80px; margin-left:auto; margin-right:auto; text-align: center; vertical-align: middle; } .mainImgFrame { width: 122px; height:80px; border: 1px solid #e9e9e9; background-color: #e9e9e9; } </style> <script> function addPadding(obj){ //(80-$('.mainImg').height())/2 if ((80-obj.height) > 0) { obj.style.paddingTop = ((80 - obj.height) / 2)+'px'; } } ; </script>

이미지 테그의 모습

HTML 부분

<a href="#" class="ui-btn ui-btn-inline" class="mainBtn"><div class="mainImgFrame"><img src="images/places/oc.jpg" class="mainImg" onload="addPadding(this)" /></div>Disciples</a>

참고 포스트

2013/06/24 - [Web/Javascript] - [javascript] Image Resize Function만들기

2013/01/10 - [Web] - div 안에 image 정중앙 놓기