먼저 간단한 XHTML/HTML 파일 코드(부분)를 살펴보겠습니다. 우리의 목적은 #container를 가로로 중앙에 배치하는 것입니다.
content
Lorem?ipsum?dolor?sit ?amet,?consectetuer?adipiscing?elit.Phasellus?varius?eleifend.
적응형 테두리 사용( auto?margin)
요소를 수평으로 중앙에 배치하는 가장 좋은 방법은 margin 속성을 사용하고 왼쪽 및 오른쪽 값을 자동으로 설정하는 것입니다. 하지만 #container에는 너비를 지정해야 합니다.
div#container?{
margin-left:?auto;
margin-right:?auto;
width:?168px;
}
이 방식은 모든 최신 브라우저에서 작동합니다. 웹 표준 호환 모드(컴플라이언스? 모드)에 있는 경우 IE6도 모두 유효합니다. 불행히도 이전 버전의 IE/Win에서는 작동하지 않습니다. 이를 위해 표를 만듭니다:
적응형 경계 지원 목록 검색?브라우저?버전?지원?
Internet Explorer 6.0, 규정 준수?모드?예?
Internet Explorer 6.0, quirks?모드?아니요?
Internet Explorer 5.5 Windows?아니요?
Internet Explorer 5.0 Windows?아니요?
Internet Explorer 5.2 Macintosh?예?
Mozilla 모든 최신 버전?예?
Mozilla Firefox?모든 버전?예?
Netscape? 4.x?아니요?
Netscape?6.x+?예?
Opera?6.0,?7.0?Macintosh?및?Windows?예?
Safari?1.2?예?
브라우저 지원의 한계에도 불구하고 대부분의 디자이너는 가능할 때마다 이 작업을 수행하도록 권장합니다. 하지만 우리는 여전히 모든 상황에 CSS를 사용할 수 있습니다.
텍스트 정렬 사용(text-align)
이 솔루션에서는 본문 요소에 적용되고 center 값이 할당되는 text-align 속성을 사용해야 합니다.
body{
text-align:center;
}
모든 브라우저를 공정하고 매우 철저하게 처리하며 손쉽게 처리합니다. 그러나 이는 텍스트에 부여된 속성이므로 #container의 텍스트도 중앙에 배치됩니다. 따라서 레이아웃에 대한 추가 작업을 수행해야 합니다.
div#container{
text-align:?left;
}
이런 방식으로 텍스트 정렬을 기본 상태로 되돌릴 수 있습니다.
통합 테두리 및 텍스트 배열
텍스트 배열은 이전 버전과 호환되므로 최신 브라우저도 적응형 테두리를 지원하며 많은 디자이너가 이를 결합하여 브라우저 간 사용을 구현합니다.
body{
text-align:?center;
}
#container?{
margin-left:?auto;
margin-right:?auto;
border :?1px?solid?red;
width:?168px;
text-align:?left
}
아아, 여전히 해킹이기 때문에 완벽하지는 않습니다. 텍스트 배열을 위해서는 중복 규칙을 작성해야 합니다. 하지만 이제는 보다 완벽한 크로스 브라우저 솔루션을 사용할 수 있습니다.
음의 경계 솔루션
이 솔루션은 절대 위치 지정(절대? 위치 지정?)과 결합되어야 합니다. 먼저 #container를 절대적으로 배치하고 왼쪽으로 50% 오프셋하여 #container의 왼쪽 가장자리가 페이지 해상도의 절반이 되도록 합니다. 다음으로 #container의 왼쪽 여백을 #container 너비의 절반에 해당하는 음수 값으로 설정합니다.
#container?{
배경:?#ffc?url(mid.jpg)?repeat-y?center;
위치:?절대;
왼쪽:?50%;
너비 :?760px;
margin-left:?-380px;
}
보세요, 아니죠? 해킹이군요! Netscape?4.x도 이를 지원합니다!
