CSS 웹 페이지 레이아웃 입문 튜 토리 얼 3:고정 너비 가운데 열

페이지 전체 가운데 에 있 는 것 은 웹 디자인 에서 가장 보편적으로 응용 되 는 형식 이다.전통 적 인 표 구조 에서 우 리 는 표 의 align="center"속성 을 사용 하여 실현 한다.div 자체 도 align="center"속성 을 지원 하고 div 를 중간 상 태 를 보 여줄 수 있 습 니 다.그러나 css 레이아웃 은 표현 과 내용 의 분 리 를 실현 하기 위해 서 입 니 다.align 정렬 속성 은 스타일 코드 입 니 다.XHTML 의 div 속성 에 쓰 면 공유 원칙 에 어 긋 납 니 다.(분 리 는 웹 사 이 트 를 관리 하 는 데 유리 합 니 다)따라서 css 의 방법 으로 내용 의 중간 을 실현 해 야 합 니 다.우 리 는 고정된 너비 의 배열 코드 를 예 로 들 어 가운데 에 있 는 css 스타일 을 추가 합 니 다

#layout {  
    border: 2px solid #A9C9E2;  
    background-color: #E8F5FE;  
    height: 200px;  
    width: 300px;  
    margin:0px auto;  
} 

margin 속성 은 대상 의 위,오른쪽,아래,왼쪽 네 방향의 바깥쪽 거 리 를 제어 하 는 데 사 용 됩 니 다.margin 이 두 개의 매개 변 수 를 사용 할 때 첫 번 째 매개 변 수 는 상하 변 거 리 를 표시 하고 두 번 째 참 수 는 좌우 변 거 리 를 표시 합 니 다.수 치 를 직접 사용 하 는 것 을 제외 하고 margin 은 auto 라 는 값 을 지원 하지 않 습 니 다.auto 값 은 브 라 우 저 로 하여 금 자동 으로 사 이 드 거 리 를 판단 하 게 합 니 다.여기 서 현재 div 의 좌우 사 이 드 거 리 를 auto 로 설정 하면 브 라 우 저 는 div 의 좌우 사 이 드 거 리 를 상당 하 게 설정 하고 중간 상태 로 나타 나 국 중 효 과 를 실현 합 니 다.주의:이 방법 은 IE6 이하 브 라 우 저 에 대해 서 는 지원 되 지 않 으 며,뒤의 CSS 는 지원 되 지 않 습 니 다. HACK 부분 에서 해결 방법 을 자세히 설명 합 니 다.[Ctrl+A 전체 선택:외부 Js 를 도입 하려 면 페이지 를 새로 고침 해 야 실행 할 수 있 습 니 다.]작업 절차 와 열 고정 너비 가 같 습 니 다.다만 CSS 테두리 설정 항목 에서 경계의 위,오른쪽,아래,왼쪽 을 각각 0,auto,0,auto 로 설정 하면 됩 니 다.