HTML/CSS Cookbook

1단 레이아웃 가운데 정렬 시키기

mission
레이어를 가운데 정렬 시키기

margin: 0 auto;
레이어를 가운데 정렬 시키기 위해서는 margin이라는 속성을 이용할 수 있습니다.
아래 예제에서는 가로폭이 300px인 레이어를 가운데 정렬시키기 위해서 가로사이즈를 지정한 후에 margin:0 auto; 를 이용해서 가운데 정렬을 시켰습니다.

 


sample http://jsfiddle.net/5b5QP/

html

<div class="wrap">
    <div class="header">
        header
    </div>
    <div class="body">
        body
    </div>
    <div class="footer">
        footer
    </div>
</div>

css

.wrap {
    width: 300px;
    margin: 0 auto;
}

 

 

댓글

댓글 본문
작성자
비밀번호
  1. 리체:leezche
    반응형 웹에 대해 전문적으로 공부해보진 못했지만, 미디어 타입에 따라 가로 사이즈를 지정해주는걸로 알고 있습니다. 결국 가로 사이즈가 지정되기 때문에 margin의 auto값이 유효하다고 생각됩니다.
    대화보기
    • zini
      저도 김결님 질문내용이 궁금합니다 ^^;;;; 알려주세요
    • 김결
      좋은 강의 감사합니당!
      질문이 있는데요, 반응형 웹을 만들경우엔 width를 특정값으로 둘 수 없을 것 같은데, 그 때도 margin: 0 auto;로 가운데 정렬이 가능한가요?
    버전 관리
    리체:leezche
    현재 버전
    선택 버전
    graphittie 자세히 보기