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


이미지

이런식으로 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>

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

  • 2016년 10월 08일에 작성됨

조회수 181


1 답변


좋아요
1
싫어요
채택취소하기

꼭 text-align으로만 해결해야하는거라면 다음과 같이 CSS를 수정해보세요.

가로 정렬은 다음과 같이 수정하면 될 것 같습니다.

.S,.I,.N,.G{
    border:1px solid black;
    background:white;
    color:red;
    font-size:60px;
    margin-left:3px;
    padding:0 1px 0 1px;
    display: inline-block; /* display 속성을 inline-block 으로 바꾸세요.*/
}

세로 정렬의 경우 참고링크를 한번 읽어보고, div.box 수준에서 수정해보세요. 높이가 고정된 것이라면 단순히 padding이나 margin 만 가지고도 해결할 수 있을 것 같네요.

  • 2016년 10월 09일에 작성됨
    리눅스(유닉스) 기반의 시스템에서 웹 서비스를 개발하고 있습니다.

로그인이 필요한 기능입니다.

Hashcode는 개발자들을 위한 무료 QnA사이트 입니다. 작성한 답변에 다른 개발자들이 댓글을 작성하거나 좋아요/싫어요를 할 수 있기 때문에 계정을 필요로 합니다.
► 로그인
► 계정만들기
Close