1. Vertical-Align
- inline 요소 혹은 inline-box요소의 경우 base line(밑줄) 에 따라 요소이 세로 정렬 상태 결정됨.
- verticla-align 속성은 기본적으로는 base-line 값으로 설정되어 있음. (부모 요소 기준 base-line)
- base-line은 각 요소의 vertical-align 속성 값을 충족하면서 줄의 높이가 최소가 될 수 있는 지점으로 이동함.
- vertical-align 속성은 inline 요소 혹은 inline-box 요소에만 적용 가능
(box 요소는 display를 inline 이나 inline-box로 변경해서 적용해줘야함.)
2. vertical-align 속성 외 세로 정렬 방법
- 플렉스 박스 속성을 사용한 정렬 방법 - 상세는 링크 참조
CSS Flexbox (Flexible Box)
CSS Flexbox 1 2 3 4 5 6 7 8 Try it Yourself » CSS Flexbox Layout Module Before the Flexbox Layout module, there were four layout modes: Block, for sections in a webpage Inline, for text Table, for two-dimensional table data Positioned, for explicit positio
www.w3schools.com
'Cording > HTML & CSS' 카테고리의 다른 글
[HTML / CSS] CSS Positioning (0) | 2020.01.04 |
---|---|
[HTML / CSS] 웹디자인 참고 사이트 7선 (0) | 2020.01.02 |
[HTML / CSS] Display 속성 (0) | 2019.12.31 |
[HTML / CSS] CSS 상속 / 우선순위 (0) | 2019.12.30 |
[HTML / CSS] 구글 폰트 사용 / 폰트 파일 사용 (0) | 2019.12.28 |
댓글