로그인  회원가입  
인포앤북 홈

Chapter 05. 레이아웃

5-1. 박스 중앙 배치

HTML 요소를 웹 페이지에 배치하는 작업은 기본적으로 화면의 상단에서부터 시작하여 좌측에서 우측 방향으로 진행됩니다. 레이아웃을 작업을 하다 보면 <div> 태그와 같은 박스 요소를 브라우저 화면의 중앙에 배치한 다음에 그 박스 안에서 세부적인 레이아웃을 진행하는 경우가 많습니다.

다음 예제를 통하여 박스 요소를 중앙에 배치하는 방법에 대해 알아봅니다.

박스 요소의 중앙 배치
ex5-1.html
<style>
#page { 
width: 800px;
margin: 0 auto;
border: solid 1px red;
}
#page h3 { background-color: yellow; }
#page .right { text-align: right; }
#page .center { text-align: center; }
#page .image { text-align: center; }
</style>
<body>
    <div id="page">
    <h3>초콜릿</h3>
        <h3 class="right">초콜릿</h3>        
    <h3 class="center">초콜릿</h3>
    <div class="image"><img src="./img/choco1.jpg"></div>
    </div>
</body>
ex5-1.html의 실행 결과