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






반응형
저작자표시 비영리 변경금지