CSS를 사용하여 요소를 중앙에 배치하는 것은 간단한 문제가 아닙니다. 동일한 유효한 CSS 중앙 정렬 설정이 브라우저에 따라 다르게 동작합니다. 먼저 요소를 수평으로 중앙에 배치하는 CSS의 몇 가지 일반적인 방법을 살펴보겠습니다.
1. 자동 여백을 사용하여 가운데 정렬을 수행하는 가장 좋은 방법은 여백 속성을 사용하는 것입니다. 요소의 margin-left 및 margin-right 속성을 auto로 설정하면 됩니다. 실제 사용에서는 중앙에 정렬해야 하는 요소에 대한 컨테이너 역할을 하는 div를 만들 수 있습니다. 특히 주목해야 할 점은 컨테이너에 너비를 지정해야 한다는 것입니다.
div#container {
margin-left: auto;
margin-right: auto;
width: 168px;
}
이 방법은 표준 호환 모드(규정 준수 모드)에서도 대부분의 주요 브라우저에서 잘 작동합니다. 정상적으로 표시됩니다. 그러나 불행히도 낮은 버전의 IE에서는 이 설정이 센터링 효과를 얻지 못합니다. 따라서 실제 프로젝트에서 이 방법을 사용하려면 사용자의 IE 브라우저 버전이 6.0 이상인지 확인해야 합니다.
지원이 이상적이지는 않지만 대부분의 디자이너는 가능할 때마다 이 접근 방식을 사용하도록 권장합니다. CSS를 사용하여 요소의 수평 중심을 맞추는 다양한 방법 중에서 이 방법이 가장 정확하고 합리적이라고 간주됩니다.
2. text-align을 사용하여 중앙 정렬을 달성하는 또 다른 방법은 text-align 특성을 center로 설정하고 이를 body 요소에 적용하는 것입니다. 이 접근 방식은 완전한 해킹이지만 대부분의 브라우저와 호환되므로 어떤 경우에는 당연히 필요합니다.
핵이라고 불리는 이유는 이 방법이 텍스트 속성을 텍스트에 적용하는 것이 아니라 컨테이너인 요소에 적용하기 때문입니다. 이는 또한 우리에게 추가 작업을 발생시킵니다. 레이아웃에 필요한 div를 생성한 후 다음 코드에 따라 본문에 text-align 속성을 적용해야 합니다.
body{
text-align:center
}
이후에는 문제가 발생합니까? body의 모든 하위 요소는 중앙에 표시됩니다.
따라서 텍스트를 기본 왼쪽 정렬로 되돌리려면 다른 규칙을 작성해야 합니다
.
텍스트 정렬:왼쪽;
}
이 추가 규칙이 약간의 불편을 초래할 것이라고 상상할 수 있습니다. 또한 표준을 완벽하게 준수하는 브라우저는 컨테이너의 위치를 변경하지 않고 텍스트를 컨테이너 안의 중앙에 배치합니다.
3. 자동 여백과 텍스트 정렬을 함께 사용하세요. 텍스트 정렬과 센터링 방법은 이전 버전과 잘 호환되고, 자동 여백 방법도 대부분의 최신 브라우저에서 지원되기 때문에 많은 디자이너가 센터링 효과를 만들기 위해 두 가지를 조합하여 사용합니다. 최대한의 크로스 브라우저 지원을 받으세요:
body {
텍스트 정렬: 중앙;
}
#컨테이너 {
여백 왼쪽: 자동;
여백 오른쪽: 자동;
테두리: 1px 단색 빨간색;
너비: 168px;
텍스트 정렬: 왼쪽
}
그러나 이것은 여전히 해킹이며 어떤 의미에서도 완벽하지 않습니다. 컨테이너의 텍스트를 중앙에 배치하기 위한 추가 규칙을 작성해야 하지만 적어도 브라우저 간에는 괜찮아 보입니다.
4. 음수 마진 솔루션 음수 마진 솔루션은 단순히 요소에 음수 여백을 추가하는 것 이상입니다. 이 방법을 사용하려면 절대 위치 지정과 음수 여백을 모두 사용해야 합니다.
다음은 이 솔루션의 구체적인 구현 방법입니다. 먼저 중앙에 있는 요소가 포함된 컨테이너를 만든 다음 페이지 왼쪽 가장자리에서 50% 떨어진 곳에 배치합니다. 이렇게 하면 컨테이너의 왼쪽 여백이 페이지 너비의 50%에서 시작됩니다.
그런 다음 컨테이너의 왼쪽 여백 값을 컨테이너 너비의 음수 절반으로 설정합니다. 이렇게 하면 컨테이너가 페이지의 가로 중간점에 고정됩니다.
#컨테이너 {
배경: #ffc url(mid.jpg) 반복-y 센터;
위치: 절대;
왼쪽: 50%;
너비: 760px;
여백 왼쪽: -380px;
}
보세요, 해킹은 없습니다! 이것이 선호되는 솔루션은 아니지만 좋은 접근 방식이며 매우 잘 작동합니다. 심지어 Netscape Navigator 4.x에서도 아무런 문제 없이 작동합니다. 놀랍지 않습니까? 따라서 가장 광범위한 브라우저 지원을 원한다면 이 방법이 최선의 선택이 될 것입니다.