CSS에서 margin:0 auto를 설정할 때 수평 센터링이 유효하지 않은 이유 분석
- 伊谢尔伦원래의
- 2016-11-23 14:36:322128검색
웹 페이지를 처음 만드는 많은 친구들이 직면할 수 있는 일반적인 문제는 CSS에 margin:0 auto를 추가하는 것이 효과가 없고 중앙에 위치할 수 없다는 것입니다. margin:0 auto의 의미는 다음과 같습니다. 가 0이면 왼쪽과 오른쪽이 너비에 따라 조정됩니다. 이는 실제로 수평 중심 맞춤을 의미합니다. 다음은 중앙에 맞출 수 없는 문제를 일으키는 두 가지 일반적인 오류입니다.
1 너비가 설정되지 않았습니다.
<div style="margin:0 auto;"></div>위 코드를 보면 DIV의 너비가 전혀 설정되어 있지 않습니다. 너비에 따라 어떻게 조정합니까? 초보자가 간과하기 쉬운 문제. 2. DOCTYPE이 선언되지 않았습니다. 1) DOCTYPE은 웹 디자인에서 사용 중인 XHTML 또는 HTML의 버전을 나타내는 데 사용되는 문서 유형의 약어입니다. 표준을 준수하는 웹 페이지를 구축하려면 DOCTYPE 선언이 필수적이고 중요한 구성 요소입니다. 2) 다음 코드를 살펴보세요. 친숙해 보이죠? 이처럼 문서 상단에는 DOCTYPE을 선언하는 데 사용되는 모든 코드 위의 혼란이 있습니다:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">3) DOCTYPE을 선언하는 데는 세 가지 옵션이 있습니다* Transitional: A 요구 사항이 매우 느슨한 DTD를 사용하면 HTML4.01 로고를 계속 사용할 수 있습니다(단, xhtml 작성 방법을 준수해야 함). 전체 코드는 다음과 같습니다.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">* Strict( Strict) ): 엄격한 요구 사항이 있는 DTD 0c6dc11e160d3b678d68754cc175188a와 같은 표현 계층 식별자 및 속성은 사용할 수 없습니다. 전체 코드는 다음과 같습니다.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">* 프레임셋: 프레임 페이지용으로 특별히 설계되었습니다. 페이지에 프레임이 포함되어 있으면 이 DTD를 사용해야 합니다. 전체 코드는 다음과 같습니다.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">4) 어느 것을 선택할지는 전환 코드를 사용하세요. 오랜 시간 동안 얘기한 결과 margin:0 atuo가 작동하지 않는 경우, 문서 상단에 DOCTYPE 문이 있는지 확인하세요. 그렇지 않으면 복사하여 붙여넣으세요. 그러면 괜찮을 거예요. 또한 margin-left:auto; margin-right:auto;의 실제 효과가 다를 수 있습니다. 0. , 예상치 못한 효과가 발생합니다.
성명：
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
이전 기사：CSS를 최적화하세요다음 기사：CSS를 최적화하세요