[css 10초 컷] margin: 0 auto (수평 가운데 정렬)이 안 될 때

 

 

 

 

 

 

[css 10초 컷] margin: 0 auto (수평 가운데 정렬)이 안 되는 이유될 때

 

 

 

 

 

 

 

 

 

 

---

 

 

 

margin: 0 auto는 

상하에는 0값, 좌우에는 auto값을 주는 것을 의미합니다.

 

 

 

 

 

1. HTML 파일에서 <!Doctype ~> 선언이 제대로 되었는지 확인합니다.

 

 

 

 

 

 

 

 

 

 

 

2. 해당 요소의 가로 사이즈가 설정되었는지 확인한다. 설정 안 되어 있다면, width를 지정한다.

왜냐하면, auto는 자동으로 사이즈를 설정해주기 때문이다.

 

 

 

 

 

 

 

 

 

3. 해당 요소의 display 속성이 inline 속성인지 확인한다.

2번의 내용과 같은 맥락으로, inline 속성은 자신만큼 영역값만을 가지기 때문이다.

 

 

 

 

 

 

 

 

 

4, 차지하고 있는 요소가 이미 해당 가로 공간을 차지하고 있는지 확인한다.

 

 

 

 

 

 

 

 

 

참조
https://ofcourse.kr/css-course/%EC%88%98%ED%8F%89-%EA%B0%80%EC%9A%B4%EB%8D%B0-%EC%A0%95%EB%A0%AC
https://www.codeit.kr/community/threads/7944

https://heinafantasy.com/163#:~:text=margin%3A%200%20auto%3B%20%EA%B0%80%20%EB%B0%98%EC%9D%91,%EC%86%8D%EC%84%B1%EC%97%90%EC%84%9C%EB%8A%94%20%EC%A0%81%EC%9A%A9%EB%90%98%EC%A7%80%20%EC%95%8A%EB%8A%94%EB%8B%A4.