먼저 간단한 XHTML/HTML 파일 코드(부분)를 살펴보겠습니다. 우리의 목적은 #container를 수평으로 중앙에 두는 것입니다.
<본문>
<div id="컨테이너">
<h1>콘텐츠</h1>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p>
</div>
</body>적응형 여백 사용(자동 여백)
요소를 수평으로 중앙에 배치하는 가장 좋은 방법은 margin 속성을 사용하고 왼쪽 및 오른쪽 값을 자동으로 설정하는 것입니다. 하지만 #container에는 너비를 지정해야 합니다.
div#컨테이너 {
여백 왼쪽: 자동;
여백 오른쪽: 자동;
너비:168px;
}
이 솔루션은 웹 표준 준수 모드에 있는 한 모든 최신 브라우저, 심지어 IE6에서도 작동합니다. 불행히도 이전 버전의 IE/Win에서는 작동하지 않습니다. 이에 대한 표를 만듭니다: 적응형 테두리 지원 목록 찾아보기 브라우저 버전 지원
Internet Explorer 6.0, 규정 준수 모드 예
Internet Explorer 6.0, 특수 모드 아니요
Internet Explorer 5.5 Windows 아니요
Internet Explorer 5.0 Windows 아니요
Internet Explorer 5.2 매킨토시 예
Mozilla의 모든 최신 버전은
Mozilla Firefox의 모든 버전은
넷스케이프 4.x 아니요
넷스케이프 6.x+ 예
Opera 6.0, 7.0 Macintosh 및 Windows 예
사파리 1.2 예
브라우저 지원으로 인해 제한되기는 하지만 대부분의 디자이너는 가능할 때마다 이를 수행하도록 권장합니다. 하지만 우리는 여전히 모든 상황에 CSS를 사용할 수 있습니다. 텍스트 정렬 사용(text-align) 이 솔루션을 사용하려면 본문 요소에 적용되고 center 값이 할당되는 text-align 속성을 사용해야 합니다.
몸{
텍스트 정렬:가운데;
}
모든 브라우저에 정의를 적용하고 철저하며 손끝에 있습니다. 그러나 이는 텍스트에 부여된 속성이므로 #container의 텍스트도 중앙에 배치됩니다. 따라서 레이아웃에 대해 몇 가지 추가 작업을 수행해야 합니다.
div#컨테이너{
텍스트 정렬: 왼쪽;
}
이러한 방식으로 텍스트 정렬을 기본 상태로 되돌릴 수 있습니다. 통합 테두리 및 텍스트 정렬 텍스트 정렬은 이전 버전과 호환되고 최신 브라우저도 적응형 테두리를 지원하므로 많은 디자이너가 이를 결합하여 브라우저 간 사용을 구현합니다.
몸{
텍스트 정렬: 중앙;
}
#컨테이너 {
여백 왼쪽: 자동;
여백 오른쪽: 자동;
테두리: 1px 단색 빨간색;
너비: 168px;
텍스트 정렬: 왼쪽
}
아아, 여전히 해킹이기 때문에 완벽하지 않습니다. 텍스트 배열을 위해서는 중복 규칙을 작성해야 합니다. 하지만 이제는 보다 완벽한 크로스 브라우저 솔루션을 사용할 수 있습니다.
음의 경계 솔루션