[CSS/DIV] CSS 페이지 수평 중심 문제를 완벽하게 해결합니다

요소들을 수평으로 중앙 배치하는 일반적인 CSS 방법

CSS로 요소를 중심 맞추는 것은 간단한 일이 아닙니다 - 동일한 정식 CSS 중심 설정도 브라우저마다 다르게 동작합니다. 먼저 CSS에서 요소를 가로로 중앙에 배치하는 몇 가지 일반적인 방법을 살펴보겠습니다.

1. 자동 여백을 이용한 중심 맞추기

CSS에서 요소를 가로로 중앙 배치하는 선호되는 방법은 margin 속성을 사용하는 것입니다—margin-left와 margin-right 속성을 auto로 설정하면 됩니다. 실제로는 중앙에 맞춰야 하는 요소들을 위해 컨테이너 div를 만들 수 있습니다. 한 가지 주목할 점은 용기의 너비를 지정해야 한다는 것입니다:

div#container{ margin-left:auto; 여백-오른쪽: 자동; 너비: 168px; }

이 방법은 대부분의 주요 브라우저에서 매우 잘 작동하며, 심지어 Windows의 IE6도 표준 준수 모드에서 제대로 표시할 수 있습니다. 안타깝게도 IE의 하위 버전에서는 이 설정이 중심 효과를 얻지 못합니다. 따라서 실제 프로젝트에서 이 방법을 사용하고 싶다면, 사용자의 IE 브라우저 버전이 6.0 이하가 아닌지 꼭 확인하세요.

지원이 부족함에도 불구하고, 대부분의 디자이너들은 가능한 한 이 방식을 권장합니다. 이 방법은 CSS로 요소 수준 중심을 구현하는 모든 방법 중 가장 올바르고 합리적인 방법으로 간주됩니다.

2. 텍스트 정렬을 사용하여 중심 맞추기를 달성합니다

요소 중심 조정을 달성하는 또 다른 방법은 텍스트 정렬 속성을 사용하고, 속성의 값을 중앙에 맞춰 설정한 후 본체 요소에 적용하는 것입니다. 철저히 해킹 시스템이지만, 대부분의 브라우저와 호환되기 때문에 경우에 따라 필수적이다.

이 방법이 텍스트 속성 자체가 아니라 컨테이너 요소에 텍스트 속성을 적용하기 때문에 해크라고 불립니다. 이로 인해 추가 업무도 생깁니다. 레이아웃에 필요한 div를 만든 후, 다음 코드에 따라 텍스트 정렬 속성을 본체에 적용해야 합니다:

body{ text-align:center; }

그 이후에 문제가 생길까요? 몸의 모든 후손은 중심에 위치해 있습니다.

따라서 텍스트를 기본값 왼쪽 정렬로 되돌리기 위해 또 다른 규칙을 작성해야 합니다:

p{ text-align:left; }

이 추가 규칙이 다소 불편을 초래할 가능성도 있습니다. 또한, 표준을 진정으로 따르는 브라우저는 컨테이너의 위치를 바꾸지 않고 텍스트를 중앙에 배치할 뿐입니다.

3. 자동 여백과 텍스트 정렬을 조합하여 사용하세요

텍스트 정렬 중심 정렬 방식은 하위 호환성이 우수하고, 자동 패딩 방식도 대부분의 최신 브라우저에서 지원되기 때문에, 많은 디자이너들이 두 방식을 결합하여 중앙 중심 효과를 극대화하는 크로스 브라우저 지원을 사용합니다:

body{ text-align:center; } #container{ margin-left:auto; 여백-오른쪽: 자동; border:1pxsolidred; 너비: 168px; text-align:left }

하지만 이건 항상 허접한 조작이며, 결코 완벽하지는 않습니다. 중앙 컨테이너의 텍스트에 대해 추가 규칙을 작성해야 하지만, 적어도 여러 브라우저에서 보기 좋습니다.

4. 음의 외경계 해법

음의 마진은 요소에 음의 마진을 추가하는 것만큼 간단하지 않습니다. 이 방법은 절대 위치 측정과 음의 마진 기법을 모두 사용해야 합니다.

다음은 이 제도의 구체적인 실행 방법입니다. 먼저, 중앙에 위치한 요소들이 있는 컨테이너를 만들고 페이지 왼쪽 가장자리의 절반 정도 위치하세요. 이렇게 하면 컨테이너의 왼쪽 여백이 페이지 너비의 50%에서 시작됩니다.

그다음 컨테이너의 왼쪽 마진 값을 음수 컨테이너 너비의 절반으로 설정하세요. 이렇게 하면 컨테이너가 페이지의 수평 방향 중간에 고정됩니다.

#container{ 배경:#ffcurl(mid.jpg)repeat-ycenter; 위치:절대; 왼쪽: 50%; 가로: 760px; 여백 왼쪽: -380px; }

봐, 해킹은 없어! 이게 선호되는 방법은 아니지만 좋은 방법이고 매우 다재다능하다 – 놀랍게도 NetscapeNavigator 4.x에서는 문제 없이 작동하지 않다니까? 따라서 가장 폭넓은 브라우저 지원을 원한다면 이 방법이 최선의 선택일 것입니다.