🔶margin auto로 중앙정렬하기
- 코드 예제
/* css */
#wrap {
width: 200px;
height: 200px;
border: 3px solid black;
margin: 0 auto;
}
/* html */
<body>
<div id="wrap"></div>
</body>-
margin: 0 auto
: 양옆의 margin에 auto를 주면, 가로로 자동정렬되어 wrap요소가 페이지의 중앙으로 오게끔 됨. -
이렇게 margin을 auto로 가로 중앙정렬 할 땐, width로 가로 사이즈를 꼭 지정해야 auto가 먹힘!
: width가 지정되지 않았으면 블록요소이기 때문에 이미 가로 사이즈를 100% 다 쓰로 있으므로 안되는 것임.
🔶 질문
1. padding도 auto 값이 있는지?
: margin은 auto값 있는데, padding은 auto값 없음.
2.margin: auto 0; 으로 세로로 중앙정렬도 되는지?
: 안됨.
: 이유 - block 요소는 너비를 100% 차지한다는 속성이 있기 때문에 가로너비의 중앙으로는 정렬할 수 있지만, 세로 너비는 콘텐츠 너비 만큼만 차지해서
~23.05