정렬
▶ 가로 가운데 정렬
text-align: center;
자신의 width 를 기준으로 가운데 정렬을 한다.
따라서 block 요소는 기본 width 가 100% 이므로 block 요소 안에서
정렬이 되지만, inline 요소는 기본 width가 auto기 때문에 inline 요소 안에서 가운데 정렬이 되지 않으므로 부모 요소에 적용해야 한다.
❓ 근데 어제 분명 block 요소는 margin-left,right : auto로 정렬한댓는데 무슨일이지
▶ 모든 요소는 기본적으로 정해진 display 값이 있다.
만약 inline 요소처럼 다른 요소들과 같은 줄에 머무르면서 block 요소처럼 가로, 세로 길이도 설정해주고 싶다면 inline-block 을 쓰면 된다.
img태그는 인라인이므로 display를 block으로 바꿔주고 정렬해준다.
▶ 세로 가운데 정렬
vertical-align 속성
inline과 inline-block에 적용된다.
요소의 가운데를 부모요소의 x의 가운데와 맞춘다.
세로길이가 100%인 요소를 만들고, 그 요소에도 vertical-align-middle 을 해준다.
주의 ) height: 100%;를 설정하기 위해서는 부모의 height가 설정되어있어야 한다.
❓ 근데 아직도 좀 헷갈린다.
다른 더 쉬운 정렬법을 알게된다면 다시 정리해봐야겠다.
