css) margin:0 auto; 가운데 정렬이 되지 않을 때

🙌틀린 정보는 댓글 피드백 환영 합니다!🙌

출처 : https://heinafantasy.com/163

✅margin: 0 auto;

1) 해당영역에 가로사이즈(width)값이 정해져있는지 보자!

 

auto 는 자동으로 사이즈를 설정해주는 것, 즉 좌우의 여백을 똑같이 배분하게 되는 것

그래서 브라우저 화면 가운데에 위치하게 된다. 그런데 width값을 지정해주지 않으면 가운데 정렬이 되지 않는다.

 

좌우의 여백을 똑같이 나눠서 가운데 정렬이 되는 원리인데, width값을 정해주지 않으면 여백의 공간이 없으니까!

즉, 사용가능한 공간이 없어서 가운데 정렬이 되지않는것이다.

아래 예시를 보자.

 

<내가 만든 코드팬 예시>

container 안에 item 2개를 넣어 displex:flex;값을 줘서 가로로 배치했다.

🚫과연 .container에 margin:0 auto;값을 주면 가운데 정렬이될까??

ㄴㄴ 안돼!! width값을 안정했자나! 

주황색으로 화면이 다 꽉차있지! 즉, 여백이 없지.

근데 만약 width값을 지정하면?

width값을 500px로 지정해보자

 

아래와 같이 흰색으로 여백의 공간이 생겼다. 저 여백을 좌우로 동일하게 비율을 가져가서 가운데로 배치될것이다.

이제 margin:0 auto;를 하면 주황색 컨테이너 박스가 가운데로 자리잡을 것!

margin:0 auto;를 적용하니 좌우 여백의 공간을 동일하게 가져가서 가운데로 정렬이된다.

 

2) inline속성의 태그는 정렬 X, display:block;을 해주면 됨!