인터넷정보

div 중앙에 나열하기

알 수 없는 사용자 2007. 10. 17. 12:42
div를 중앙에 나열하고 싶을때....

특히 겔러리 같은 느낌으로 정렬하고 싶을때...


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title> div 중앙에 나열하기</title>
<meta http-equiv="content-type" content="text/html; charset=euc-kr">
<meta name="generator" content="editplus" />
<meta name="author" content="" />
<meta name="keywords" content="" />
<meta name="description" content="" />
<style type="text/css">
        html { height:100%; border:0; }
        body { height:100%; margin: 40px; padding: 0px; font-size:9pt; }
       
       
        .imgdiv{
                float:left;
                background-color: #cccccc;
                border: 1px solid #e1e1e1;
                text-align:center;
                position:relative;
                display:inline;
                margin: 10px;
                padding:6px;
                width:120px;
                height:140px;
        }
       
        .imgdivdiv {
                border: 1px solid #E08600;
                margin: 0px auto;
        }
       
        .div_img {
                width:100px; height:100px;
                border: 1px solid #9D9DA1;
                margin: 4px auto;
        }
       
        .centerimg {
                margin:10px;
                width:100px; height:100px;
                border: 4px solid #E08600;
        }
       
        .clear {
                clear: both;
        }
</style>
<script language="javascript" type="text/javascript">
        /* <![CDATA[ */
       
        // float 중앙정렬하기 by 알릭 http://www.alik.info
        // float: left 가 적용된 div 들의 묶음 div 의 아이디를 넘겨받음
        // 공백 계산후 묶음 div 의 parent 에 padding-left 값을 추가해줌
        function centerFloatLeft(wrapID, redo) {
                var cnt = 0;
                var imgDiv;
                var wrap = document.getElementById(wrapID);
                if(redo && window.attachEvent) {
                        wrap.style.paddingLeft = '0px';
                }
                for(i=0; i<wrap.childNodes.length; i++) {
                        var imgDivi = wrap.childNodes[i];
                        if(imgDivi.nodeName == 'DIV' && imgDivi.className != 'clear') {
                                imgDiv = imgDivi;
                                cnt ++;
                        }
                }
                var marginLeft = getElementStyle(imgDiv,'marginLeft', 'margin-left');
                var for1 = imgDiv.offsetWidth + (parseInt(marginLeft)*2);
                var inside = parseInt(wrap.offsetWidth / for1);
                if(cnt < inside) {
                        inside = cnt;
                }
                var leftover = wrap.offsetWidth - (for1 * inside);
                wrap.style.paddingLeft = (leftover/2) + (parseInt(marginLeft)/2) + 'px';
               
                if(!redo) {
                        if(window.addEventListener){
                                window.addEventListener('resize', function() {
                                        centerFloatLeft(wrapID, true);
                                }, false);
                        } else {
                                window.attachEvent('onresize', function() {
                                        centerFloatLeft(wrapID, true);
                                });
                        }
                }
        }
       
        // 위 함수와 같이 다녀야 하는 스타일 속성의 값 뽑는 함수
        function getElementStyle(elem, IEStyleProp, CSSStyleProp) {
                if (elem.currentStyle) {
                        return elem.currentStyle[IEStyleProp];
                } else if (window.getComputedStyle) {
                        var compStyle = window.getComputedStyle(elem, "");
                        return compStyle.getPropertyValue(CSSStyleProp);
                }
                return "";
        }
       
        /* ]]> */
</script>
</head>

<body>
<center><h3>div 중앙에 나열하기</h3></center>
<table border=1 width=100%>
        <tr>
                <td height=20>
                        이미지들만 나열할경우에는 이미지들을 감싼 div 에 align=center 또는 text-align:center 의 속성을 주면 끝~
                        <br />이미지들 간의 간격은 margin 이나.. hspace 나...이용함. <b>그렇다면 div 로도 이렇게 할순 없을까요??</b>(오늘의 주제!!)
                </td>
        </tr>
        <tr>
                <td id=cell0>
                        <div id="imgWrap0" style="text-align:center; w"><img class="centerimg" src="http://www.playnow.co.kr/load.php/4820fe5b33e1/멍~.jpg" /> <img class="centerimg" src="http://www.playnow.co.kr/load.php/4820fe5b33e1/멍~.jpg" /> <img class="centerimg" src="http://www.playnow.co.kr/load.php/4820fe5b33e1/멍~.jpg" /> <img class="centerimg" src="http://www.playnow.co.kr/load.php/4820fe5b33e1/멍~.jpg" /> <img class="centerimg" src="http://www.playnow.co.kr/load.php/4820fe5b33e1/멍~.jpg" /></div>
                </td>
        </tr>
        <tr>
                <td height=20>
                        그러나~ 이미지가 아닌 div 를 나열 할 경우 float:left 를 사용하면 아래처럼 된다..
                        <br />div를 감싸고 있는 div 에 align=center 또는 text-align:center 의 속성을 주어도 달라지는것 없음.
                        <br />float: left 는 왼쪽으로.. right 는 오른쪽으로 쏠림.. ㅡ.ㅡ
                </td>
        </tr>
        <tr>
                <td id=cell1>
                        <div id="imgWrap1">
                        <div class=imgdiv>
                        <img src="http://www.playnow.co.kr/load.php/4820fe5b33e1/멍~.jpg"  class="div_img" border=0>
                        <div class=imgdivcap>이미지 설명...</div>
                        </div>
                        <div class=imgdiv>
                        <img src="http://www.playnow.co.kr/load.php/4820fe5b33e1/멍~.jpg"  class="div_img" border=0>
                        <div class=imgdivcap>이미지 설명...</div>
                        </div>
                        <div class=imgdiv>
                        <img src="http://www.playnow.co.kr/load.php/4820fe5b33e1/멍~.jpg"  class="div_img" border=0>
                        <div class=imgdivcap>이미지 설명...</div>
                        </div>
                        <div class=imgdiv>
                        <img src="http://www.playnow.co.kr/load.php/4820fe5b33e1/멍~.jpg"  class="div_img" border=0>
                        <div class=imgdivcap>이미지 설명...</div>
                        </div>
                        <div class=imgdiv>
                        <img src="http://www.playnow.co.kr/load.php/4820fe5b33e1/멍~.jpg"  class="div_img" border=0>
                        <div class=imgdivcap>이미지 설명...</div>
                        </div>
                        <div class="clear"></div>
                        </div>
                </td>
        </tr>
        <tr>
                <td height=20>
                        그래서 생각해낸게... float:left 되는 div들을 묶어서 테이블에 넣고 그 테이블을 중앙정렬하는것!
                        <br />한줄에 다 나올땐 오예! 멋진데.... 넓이를 줄여보면.. 줄바꿈이 되면서 또 왼쪽으로 쏠린다... 브라우져가 공백계산을 못하는걸깡?
                </td>
        </tr>
        <tr>
                <td id=cell2>
                        <table align=center border=1>
                                <tr>
                                        <td>
                                                <div id="imgWrap1">
                                                <div class=imgdiv>
                                                <img src="http://www.playnow.co.kr/load.php/4820fe5b33e1/멍~.jpg"  class="div_img" border=0>
                                                <div class=imgdivcap>이미지 설명...</div>
                                                </div>
                                                <div class=imgdiv>
                                                <img src="http://www.playnow.co.kr/load.php/4820fe5b33e1/멍~.jpg"  class="div_img" border=0>
                                                <div class=imgdivcap>이미지 설명...</div>
                                                </div>
                                                <div class=imgdiv>
                                                <img src="http://www.playnow.co.kr/load.php/4820fe5b33e1/멍~.jpg"  class="div_img" border=0>
                                                <div class=imgdivcap>이미지 설명...</div>
                                                </div>
                                                <div class=imgdiv>
                                                <img src="http://www.playnow.co.kr/load.php/4820fe5b33e1/멍~.jpg"  class="div_img" border=0>
                                                <div class=imgdivcap>이미지 설명...</div>
                                                </div>
                                                <div class=imgdiv>
                                                <img src="http://www.playnow.co.kr/load.php/4820fe5b33e1/멍~.jpg"  class="div_img" border=0>
                                                <div class=imgdivcap>이미지 설명...</div>
                                                </div>
                                                <div class="clear"></div>
                                                </div>
                                        </td>
                                </tr>
                        </table>
                </td>
        </tr>
        <tr>
                <td height=20>
                        위와 같은 상황에서 float:left 의 div 들을 감싸고 있는 div 의 ID를 centerFloatLeft('아이디') 형식으로 넘겨주며 실행하면 아래처럼 된다. (스크립트는 소스보기)
                </td>
        </tr>
        <tr>
                <td id="cell3">
                        <div id="imgWrap2">
                        <div class=imgdiv>
                        <img src="http://www.playnow.co.kr/load.php/4820fe5b33e1/멍~.jpg"  class="div_img" border=0>
                        <div class=imgdivcap>이미지 설명...</div>
                        </div>
                        <div class=imgdiv>
                        <img src="http://www.playnow.co.kr/load.php/4820fe5b33e1/멍~.jpg"  class="div_img" border=0>
                        <div class=imgdivcap>이미지 설명...</div>
                        </div>
                        <div class=imgdiv>
                        <img src="http://www.playnow.co.kr/load.php/4820fe5b33e1/멍~.jpg"  class="div_img" border=0>
                        <div class=imgdivcap>이미지 설명...</div>
                        </div>
                        <div class=imgdiv>
                        <img src="http://www.playnow.co.kr/load.php/4820fe5b33e1/멍~.jpg"  class="div_img" border=0>
                        <div class=imgdivcap>이미지 설명...</div>
                        </div>
                        <div class=imgdiv>
                        <img src="http://www.playnow.co.kr/load.php/4820fe5b33e1/멍~.jpg"  class="div_img" border=0>
                        <div class=imgdivcap>이미지 설명...</div>
                        </div>
                        <div class="clear"></div>
                        </div>
                </td>
        </tr>
        <tr>
                <td height=20>
                        그나마 전체적으로 중앙정렬이 유지된다....굿~!! <br />브라우져의 귀퉁이를 잡고 사이즈를 늘렷다 줄였다 해보고... 달라진 창크기에서 새로고침도 해보도록 하자!
                </td>
        </tr>
</table>
<script>
        centerFloatLeft('imgWrap2');
</script>
</body>
</html>
반응형

'인터넷정보' 카테고리의 다른 글

URL / 절대경로 / 상대경로란 ?  (0) 2007.10.17
URL / 절대경로 / 상대경로란 ?  (0) 2007.10.17
404 Not Found 국가별 에러메시지  (0) 2007.10.17
404 Not Found 국가별 에러메시지  (0) 2007.10.17
div 중앙에 나열하기  (0) 2007.10.17
레이어를 셀렉트박스, 자바애플릿 위에 오게 하는 방법  (0) 2007.10.17
레이어를 셀렉트박스, 자바애플릿 위에 오게 하는 방법  (0) 2007.10.17
embed 태그 다양한 옵션 효과  (0) 2007.10.17
embed 태그 다양한 옵션 효과  (0) 2007.10.17
국가코드  (0) 2007.10.17

'인터넷정보'의 다른글

  • 현재글div 중앙에 나열하기

관련글

댓글

티스토리툴바