Div+CSS 튜토리얼: div 컨테이너의 수평 중앙 정렬을 달성하는 방법 요약

웹 표준의 페이지 레이아웃은 Div와 CSS를 사용하여 구현됩니다. 가장 일반적으로 사용되는 것은 페이지 전체를 가로로 중앙에 배치하는 효과입니다. 이는 페이지 레이아웃에 대한 기본 지식이자 가장 먼저 마스터해야 하는 지식입니다. 그러나 사람들은 여전히 ​​이 질문을 자주 합니다. 여기에서는 페이지의 수평 중앙 정렬을 달성하기 위해 Div와 CSS를 사용하는 방법을 간략하게 요약하겠습니다.

1. margin:auto 0 및 text-aligh:center는

인터넷과 같은 최신 브라우저에서 사용됩니다. Explorer 7, Firefox, Opera 등) 최신 브라우저에서 수평 중앙 정렬을 구현하는 방법은 매우 간단합니다. 왼쪽 및 오른쪽 여백을 자동으로 설정하기만 하면 됩니다. 의미:
#wrap {마진:0 자동;}
위 코드는 Wrap div와 왼쪽 및 오른쪽 사이의 거리가 자동으로 설정되고, 상한 및 하한 값이 0(임의일 수 있음)이라는 의미입니다. 최신 브라우저(예: Internet Explorer 7, Firefox, Opera 등)에서 현재 코드를 실행하세요.
http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">
http://www.w3.org/1999/xhtml ">
<머리>


<스타일 유형="텍스트/css">
div#wrap {
너비:760px;
여백:0 자동;
테두리:1px 솔리드 #333;
배경색:#ccc;
}


<본문>

위의 내용은 매우 잘 작동합니다. 그러나 이는 Internet Explorer 6 이상에서는 작동하지 않지만 다행히 자체 해결 방법이 있습니다. Internet Explorer에서 text-align 속성은 상속 가능합니다. 즉, 상위 요소에 설정된 후에는 기본적으로 하위 요소에 이 속성이 있게 됩니다. 따라서 body 태그의 text-align 속성 값을 가운데로 설정하여 페이지의 모든 요소가 자동으로 가운데에 맞춰지도록 할 수 있습니다. 동시에 페이지의 텍스트를 변경하기 위한 후크도 추가해야 합니다. 우리가 읽는 데 익숙한 방식 - 왼쪽 정렬. 따라서 우리는 다음과 같은 코드를 작성해야 합니다.
본문 {텍스트 정렬:중심;}
#wrap {텍스트 정렬:왼쪽;}
이런 방식으로 Internet Explorer에서 Div의 중앙 정렬을 쉽게 달성할 수 있습니다. 따라서 모든 브라우저에서 센터링 효과를 표시하려면 다음과 같이 코드를 작성할 수 있습니다.
본문 { 텍스트 정렬: 중앙 }
#wrap { 텍스트 정렬:왼쪽;
여백:0 자동;
}
http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">
http://www.w3.org/1999/xhtml ">
<머리>


<스타일 유형="텍스트/css">
본문 { 텍스트 정렬: 중앙 }
div#wrap {
텍스트 정렬:왼쪽;
너비:760px;
여백:0 자동;
테두리:1px 솔리드 #333;
배경색:#ccc;
}


<본문>

하지만 여기에는 전제가 있습니다. 즉, 중앙에 있는 요소의 너비는 고정되어 있어야 합니다. 예를 들어 여기서는 760픽셀로 설정했습니다.

2. 상대 위치 지정 및 음수 여백 줄

바꿈을 위해 상대 위치 지정을 수행한 다음 음수 여백을 사용하여 오프셋을 오프셋합니다. 이 방법은 비교적 간단하고 구현하기 쉽습니다

.
위치:상대적;
너비:760px;
왼쪽:50%;
여백-왼쪽:-380px
}
이 코드의 의미는 상위 요소의 body 태그를 기준으로 랩의 위치를 ​​설정한 다음 왼쪽 테두리를 페이지 중앙으로 이동하는 것입니다(즉, left:50%의 의미). 중간 위치에서 왼쪽으로 이동합니다. 수평 중앙에 오도록 거리의 절반만큼 뒤로 오프셋합니다.
http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">
http://www.w3.org/1999/xhtml ">
<머리>


<스타일 유형="텍스트/css">
div#wrap {
위치:상대적;
너비:760px;
왼쪽:50%;
여백-왼쪽:-380px;
테두리:1px 솔리드 #333;
배경색:#ccc;
}


<본문>

마찬가지로 가로 가운데 맞춤을 설정하기 전에 고정 너비를 설정해야 합니다.

어떤 방법을 선택해야 할까요?
위의 두 가지 방법 중 어느 것이 더 낫습니까? 첫 번째 방법은 Hack 기술을 사용하는 것처럼 보이지만 실제로는 그렇지 않습니다. 상당히 만족스러운 웹 표준 작성 방법이며 사양을 완전히 준수하므로 두 가지 방법 중 하나를 선택하여 사용할 수는 없습니다. CSS 해킹 문제입니다.

3. 기타 센터링 방법

위에서 언급한 내용은 모두 특정 너비가 설정된 경우 수평 센터링을 구현한 것입니다. 때때로 우리는 유연한 레이아웃을 만들고 싶거나 요소가 컨테이너에 있을 때 중앙에 위치하기를 원하고 특정 너비를 설정하고 싶지 않습니다. 실제로 이것은 진정한 중앙 정렬이 아닙니다. 길이가 100%인 요소의 경우 중앙 정렬이라고 할까요, 아니면 왼쪽 정렬이라고 할까요? 따라서 높이와 너비가 없는 모든 센터링은 진정한 센터링이 아닙니다. 요소의 패딩을 사용하여 이 디자인을 설정했습니다. 실제로 상위 요소의 컨테이너 크기를 변경합니다.
중심을 유지하면서 랩 요소의 길이를 창에 따라 변경하려면 다음과 같이 작성할 수 있습니다.
몸 {
패딩:10px 150px;
}
여기서는 부모 요소의 왼쪽과 오른쪽 패딩을 동일하게 유지하면 됩니다.
http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">
http://www.w3.org/1999/xhtml ">
<머리>


<스타일 유형="텍스트/css">
몸 {
패딩:10px 150px;
}
div#wrap {
테두리:1px 솔리드 #333;
배경색:#ccc;
}


<본문>

물론 이는 "중앙에 있는 것처럼 보이지만" 종종 매우 유용합니다.