CSS를 사용하여 고정 너비 레이아웃으로 문서 가운데 ​​맞추기

고정 너비 레이아웃은 인기있는 브라우저 중 일부를 중심으로하기가 어려울 수 있지만 몇 줄의 코드 만 있으면 가능합니다.

방법은 다음과 같습니다.

  1. HTML 편집기에서 CSS 스타일 시트를 사용하여 새 웹 페이지를 작성하십시오.
  2. div 요소를 페이지의 모든 요소를 ​​저장할 페이지의 기본 요소로 만듭니다.
  3. 해당 div 요소에 페이지에서 고유 한 ID를 지정하십시오.
  4. CSS 스타일 시트를 열고 div 요소의 너비를 설정하십시오. div # main {width : 750px; }
  5. div를 가운데 맞추기 위해 자동 여백을 추가하십시오. div # main {width : 750px; margin-left : 자동; margin-right : 자동}
  6. Netscape 4와 IE 4 - 6 ( 단점 모드 )을 수정하려면 본문에 텍스트 정렬을 추가하십시오. body {text-align : center; }
  7. 그런 다음 내부의 모든 텍스트가 가운데에 배치되므로 text-align : left를 추가하여 #main div의 텍스트를 다시 정렬하십시오. 거기에. div # main {width : 750px; margin-left : 자동; margin-right : 자동; 텍스트 정렬 : 왼쪽; }
  8. 페이지와 스타일 시트를 저장하십시오.
  9. 여러 웹 브라우저에서 테스트하십시오.

이렇게하면 레이아웃 상자가 가운데에 배치되지만 내용은 배치되지 않습니다. text-align을 사용하여 내부 내용을 가운데에 맞 춥니 다.