수직 정렬

[CSS] 수평 정렬 & 수직 정렬

수평 정렬 inline 요소 inline요소와 inline-block 요소에 가능한 방법 요소의 부모 태그에게 text-align: center; 적용 block 요소 요소에 margin: 0 auto; 적용 수직 정렬 수평 정렬과 다르게 한 번에 정렬되는 방법이 없기 때문에 여러 속성들을 함께 써서 적용해야 한다. block 요소 block 요소는 vertical-align 적용이 불가능하므로 inline-block으로 display 값을 변경 vertical-align: middle; 적용 1-1. 정 가운데에 배치 height가 100%인 를 생성 (가운데 배치를 도와 주는 가짜 요소) 이 요소에 vertical-align: middle; 적용 1-2. 요소가 밀려난다면? HTML 작성에서 사이의 ..

[CSS] Baseline (수직 정렬)

Baseline 보통 사람들은 요소의 끝을 baseline이라고 생각하지만, 글자의 바로 밑 라인을 baseline이라고 한다. 크기가 큰 글자와 작은 글자를 두고 보면 아래가 맞춰 있는 모습을 볼 수 있는데 그 선이 baseline이 되는 것이다. 텍스트 뿐만 아니라 이미지, inline 요소도 마찬가지이다. 또한, vertical-align의 조건들을 충족시키면서 줄의 높이를 최소화시키는 곳에 위치한다. vertical-align inline 요소와 inline-block 요소를 수직 정렬할 때 사용한다. block 요소에는 적용되지 않는다. 요소 자체만 정렬하며, 내용에는 영향을 미치지 않는다. table cell에 적용할 때는 제외된다. vertical-align은 정렬하려는 요소를 다른 inli..