margin 중앙정렬 모르겠어요

[이현지]

 

선생님 안녕하세요

레이아웃 연습하고 있는데... 기초적인 건데 자꾸 헷갈려서 글 남깁니다.

s-box 3개를 마진으로 여백줘서 중앙 배치 해보려고 width값을 25%에 했습니다.(아직 margin 주기 전 스샷)

그런 다음 중앙 정렬 하려고  s-box전체를 감싸는 c-center도 만들어서 margin:auto; 를 줘봤는데 적용되지 않습니다. 

wrap에서 width:1200px주고 margin:auto가 먹히는데,  s-box에서는 안 먹힐까요? 

[codingapple]

박스 2개 테두리가 붙어있으면

박스2개의 margin을 합치려는 성질이 있습니다

큰 박스에 padding을 주거나 해서 좀 떨어트려봅시다 

[이현지]

큰 박스라 하시면 c-center 말씀하시는 건가요?

안돼서 박스란 박스에 다 넣어봤는데 적용이 안되요..ㅠㅠ

[codingapple]

전체코드를 올려주십시오 

[이현지]

이게 다 입니다.. 인터넷  찾아보니 부모요소에 text-aline 주고 자식 요소에 inline-block 주면 된다고 해서 해결은 했는데..

마진이 안되는 이유가 너무 궁금합니다. c-center에 width를 안준 것 때문인지, width 에 시험삼아

1200px이나 600px 이런 식으로도 넣어보니 중앙정렬은 되려고 하는 거 같던데...  박스 위치가 이상하게 가고 그렇습니다..ㅠㅠ

 

[codingapple]

margin : auto 중앙정렬은 display : block; width : 적절히 있어야 잘됩니다

width 추가해봅시다 

박스폭 이상한건 25%폭의 박스3개라 그런듯요 

[이현지]

1. c-center에 width:600px 주고 s-box width에 px로 값을 줬을 때 중앙정렬 성공

2. c-center에 width:600px 주고 s-box width에 %로 값을 줬을 때 중앙으로 가긴 했는데 왼쪽으로 치우쳐짐.  

 

2번 이유가 궁금합니다. 반응형으로 작업하려면 %로 해야하는데 2번이 안되는 이유를 알려주셨으면 좋겠어요

[codingapple]

c-center는 가운데정렬 잘 되는데

안에 20%짜리 박스3개에 float left 줘서 그 친구들이 왼쪽으로 왔을 뿐입니다

[글쓴이]

글