[css] “여백 : 0 자동;”에 정확히 필요한 것은 일하다?

margin: 0 auto;요소의 설정 이 중심을 잡는 데 사용 된다는 것을 알고 있습니다 (왼쪽-오른쪽). 그러나 요소와 그 부모가 자동 마진이 작동하기위한 특정 기준을 충족해야한다는 것을 알고 있으며 마법을 올바르게 얻을 수는 없습니다.

내 질문은 간단합니다. margin: 0 auto;자식을 왼쪽 중앙 에 배치하려면 요소와 부모에 어떤 CSS 속성을 설정해야 합니까?



답변

내 머리 꼭대기에서 :

  1. 요소는 블록 수준이어야합니다 (예 : display: block또는display: table
  2. 요소는 부유하지 않아야합니다
  3. 요소는 고정 또는 절대 위치를 가져서는 안됩니다 1

다른 사람들의 머리 꼭대기에서 :

  1. 요소는 2width 가 아니 어야합니다.auto

주의 모든 작동하는 이러한 조건은 요소의 충족해야이 중심되고.


(1) 이 한 가지 예외가있다 : 당신의 고정 또는 절대 위치 요소가있는 경우 left: 0; right: 0, 것이다 자동 여백의 중심 .

2 기술적 margin: 0 auto으로는 자동 너비로 작업하지만 자동 너비가 자동 여백보다 우선하며 자동 여백은 제로화되어 “작동하지 않는”것처럼 보입니다.


답변

내 머리 꼭대기에서 width. 가운데에 놓을 컨테이너의 너비를 지정해야합니다 (부모 너비가 아님).


답변

CSS에 대한 완전한 규칙 :

  1. ( display: blockAND width하지 자동) 또는display: table
  2. float: none
  3. position: relative

답변

요소가 블록 요소가 아닌 경우 머리 꼭대기에서 벗어납니다.

그런 다음 너비를 지정하십시오.


답변

display : table에서도 작동합니다.이 경우 너비를 설정할 필요가 없으므로 유용한 표시 속성입니다. (이 게시물은 5 세라는 것을 알고 있지만 여전히 지나가는 사람과 관련이 있습니다.)


답변

내 고양이 머리 꼭대기에서 가운데를 향하도록 div하려는 것이로 설정되어 있지 않은지 확인하십시오 width: 100%.

그렇다면 하위 div에 설정된 규칙이 중요합니다.


답변

jsFiddle을 만든이 빠른 예제로 이동하십시오 . 잘 이해하기 쉽습니다. wrapper사이트 너비와 함께 div를 사용 하여 가운데 정렬 할 수 있습니다. 당신이 넣어야하는 이유 width는 브라우저가 당신이 유동적 인 레이아웃을하지 않을 것이라는 것을 알기 때문입니다.