简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
집 > 웹 프론트엔드 > CSS 튜토리얼 > 본문

CSS에서 margin:0 auto를 설정할 때 수평 센터링이 유효하지 않은 이유 분석

伊谢尔伦
풀어 주다： 2016-11-23 14:36:32
원래의
2127명이 탐색했습니다.

웹 페이지를 처음 만드는 많은 친구들이 직면할 수 있는 일반적인 문제는 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
와 같은 표현 계층 식별자 및 속성은 사용할 수 없습니다. 전체 코드는 다음과 같습니다. 

<!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. , 예상치 못한 효과가 발생합니다.


관련 라벨：
css margin
원천：php.cn
이전 기사：CSS를 최적화하세요 다음 기사：CSS 강제 줄 바꿈 및 숨겨진 구현 이상
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
저자별 최신 기사
최신 이슈
CSS 마인드맵 코스웨어는 어디에 있나요? 코스웨어
에서 2024-04-16 10:10:18
0
0
1335
페이지가 갑자기 CSS나 부트스트랩을 가져올 수 없습니다. 그래서 저는 페이지를 개발 중입니다. 어제 일부 작업을 했는데 잘 작동했고, 오늘은 나머지 작업을 계속했는데 모든 것이 괜찮습니다. 일반 HTML 페이지로 열려고...
에서 2024-04-06 21:58:04
0
1
800
Javafx에서 인라인 CSS 스타일을 동적으로 수정합니다. 응용프로그램이 최대화되었을 때 창의 배경 이미지를 변경하려고 합니다. 내 배경은 인라인 CSS를 사용하여 설정됩니다. 스타일에 대해 두 개의 다른 변수와 if 문...
에서 2024-04-06 20:57:16
0
1
487
CSS에서 부동 요소를 수평이 아닌 수직으로 쌓는 방법은 무엇입니까? 한쪽에는 기본 콘텐츠가 있고 다른 한쪽에는 추가 콘텐츠가 있는 두 개의 열로 구성된 웹페이지를 만들려고 합니다. 하지만 float 속성을 사용하여 추가 열을 왼쪽...
에서 2024-04-06 20:45:26
0
2
386
다른 CSS 코드가 무엇이든 관계없이 Flexbox의 텍스트를 수직 중앙에 강제로 배치할 수 있는 방법이 있나요? 제가 개발 중인 웹사이트에 사용되는 더 큰 CSS 코드의 일부인 다음 CSS 코드가 있습니다. .cards-u{display:flex;flex-wrap:wrap;...
에서 2024-04-06 20:41:51
0
1
518
관련 주제
더>
인기 추천
인기 튜토리얼
더>
관련 튜토리얼
인기 추천
최신 강좌
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿
회사 소개 부인 성명 Sitemap
PHP 중국어 웹사이트：공공복지 온라인 PHP 교육，PHP 학습자의 빠른 성장을 도와주세요！