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