오늘 나는 CSS 중심 레이아웃의 문제를 구글링했는데, 결과는 거의 모두 같은 기사를 인용했습니다. IE에서 중앙에 배치하려면
요소에 text-align:center 속성을 정의하세요. Firefox에서는 래퍼를 정의해야 합니다. 그런 다음 margin-left:auto;margin-right:auto; 속성을 지정하여 Firefox에서 블록을 중앙에 배치합니다. 실제로 나 자신도 margin:auto;의 약자인 margin 속성을 사용하여 중심을 설정한다. 여백 약어 속성은 시계 방향(위쪽, 오른쪽, 아래쪽, 왼쪽)의 네 방향으로 페이지 여백을 설정합니다. margin-top:auto 속성을 설정한 후 블록을 중앙에 배치하려고 한다고 생각했다면 오산입니다. 이 방법을 사용할 경우 margin-left:auto;margin-right:auto; 속성을 동시에 설정하여 중앙에 배치해야 합니다. 그러나 margin: 0 auto;를 설정하여 중앙에 배치할 수도 있습니다.
중앙으로 가는 또 다른 방법은 절대 위치 지정을 사용한다는 전제 하에 왼쪽: 50% + 여백-왼쪽: -375px의 조합을 사용하는 것입니다. 두 가지 센터링 방법은 다음과 같습니다.
/* 방법 1 */
body {
background: #00FF7F;
text-align: center; /* center alignlayout을 위한 해킹 */
}
#wrapper{
background: Aqua
width: 750px;
margin:auto; /* 또는 margin-left:auto;margin-right:auto;*/
}
/* 방법 2 */
#wrapper2 {
위치: 절대;
너비: 750px;
여백:-375px
배경: 주황색
나는 개인적으로 방법 2의 블록에 필요한 견고성이 부족하고 코드를 이해하기 쉽지 않기 때문에 항상 방법 1을 사용하여 중앙에 배치합니다. 방법 2의 형태를 일정 한계까지 줄이면 전체 레이아웃이 흐르는 것을 볼 수 있습니다. 물론 어떤 사람들은 이 효과를 원하기도 합니다. :) 두 번째 방법의 또 다른 장점은 대부분의 텍스트가 여전히 왼쪽 정렬되기 때문에 다른 중첩 블록의 body 요소 설정을 재정의할 필요가 없다는 것입니다. 이렇게 하면 중복성을 어느 정도 줄일 수 있습니다. 그러나 나는 이 이점이 미미하다고 생각한다. 간단히 말해서, 모든 사람은 자신의 선호도에 따라 필요한 것을 가져갑니다.
다른 하나는 IE의 이중 여백 버그입니다. 해결책은 display:inline 설정을 추가하는 것입니다. 실제로 이 구문 분석 오류 버그는 여러 측면에 영향을 미칩니다. IE의 CSS 레이아웃에서 비정상적인 공백이 발생하는 경우 display:inline; 속성 선언을 추가해 볼 수 있습니다. 특정 레이아웃 문제의 경우 원하는 대로 레이아웃을 만들기 위해 display:block과 display:inline을 함께 사용해야 합니다. 순서 취소 목록으로 제어되는 그림 메뉴에서도 비슷한 문제가 발생했습니다.
빠른 시일 내에 다양한 브라우저에 CSS 버그가 있지만 CSS 페이지 레이아웃 방법은 오늘날까지 발전하여 상대적으로 성숙하여 버그로 인해 사용자를 미치게 만들 가능성이 더 이상 높지 않습니다. 질문이 있는 경우 검색 엔진을 확인하여 대부분의 문제를 해결하세요. 여가 시간에 몇 가지 실험을 할 수 있다면 긴급 상황에서도 침착함을 유지할 수 있을 것입니다.
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
