Web/Javascript

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

saltdoll 2017. 10. 11. 03:57
반응형

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 정중앙 놓기






반응형
도움이 되셨다면 하트모양의 "♡ 공감"을 눌러주시면 큰 격려가 됩니다.
(로그인하지 않으셔도 가능)