[html,css] 패딩과 text-align으로 중앙정렬 ...

조회수 3410회

이미지

이런식으로 SING의 홈페이지를 중앙정렬 해야하는데 패딩과 text-align을 이용해야합니다 ...

<!DOCTYPE html>
<html>
    <head>
        <title></title>
        <style>
            body {width:1000px; margin:0 auto;}
            div#theme{overflow:hidden;
                        /*padding:0 250px 0 250px;*/
            }
            div.box{
                margin:0 auto;
                text-align:center;
                /*float:left;*/
                /*border:1px solid black;
                background:white;
                color:red;*/
                /*margin-top:125px;*/
                /*font-size:60px;*/
                /*margin-left:10px;*/
            }
            div.S,.I,.N,.G{

                float:left;
                border:1px solid black;
                background:white;
                color:red;
                font-size:60px;
                margin-left:3px;
                padding:0 1px 0 1px;

            }
            #theme {/*text-align:center;*/background:skyblue;height:250px;padding:0 0 0 0px;border-top:7px dotted blue;border-bottom:7px dotted blue;margin:0 auto;}
            #mainmenu {background:gray;}
            #wrap {overflow:hidden;}
            #maintext {background:yellow; float:left;width:700px;}
            #submenu {background:lightgray; float:left;width:300px;}
            #tale{background:green;}
        </style>
    </head>
    <body>
        <div id="theme">
            <div class="box">
                <div class="S">
                    <span>S</span>
                </div>
                <div class="I">
                    <span>I</span>
                </div>
                <div class="N">
                    <span>N</span>
                </div>
                <div class="G">
                    <span>G</span>
                </div>
                </div>
                <span style="color:white;text-align:center;">의 홈페이지</span>
            </div>
        </div>
        <div id="mainmenu">MAINMENU</div>
            <div id="wrap">
                <div id="maintext">
                    MAINTEXT<br/>MAINTEXT<br/>MAINTEXT<br/>MAINTEXT<br/>
            </div>
        <div id="submenu">
            SUBMENU<br/>SUBMENU<br/>SUBMENU<br/>SUBMENU<br/>SUBMENU<br/>SUBMENU<br/>
            </div>
        </div>
    <div id="tale">TALE TALE TALE</div>
    </body>
</html>

코드가 엄청 지저분합니다 ... 도움 주시면 정말 감사드립니다... 몇시간동안 씨름중인데 답이 나오질 않네요 ㅣㅣ

1 답변

답변을 하려면 로그인이 필요합니다.

Hashcode는 개발자들을 위한 무료 QnA 사이트입니다. 계정을 생성하셔야만 답변을 작성하실 수 있습니다.

(ಠ_ಠ)
(ಠ‿ಠ)

ᕕ( ᐛ )ᕗ
로그인이 필요합니다

Hashcode는 개발자들을 위한 무료 QnA사이트 입니다. 계정을 생성하셔야만 글을 작성하실 수 있습니다.