[CSS] vertical-align: inline 상자 세로 정렬

 

📌 vertical-align

: 부모 요소의 baseline을 기준으로 inline 상자를 정렬하는 속성

• inline, inline-block, 테이블 셀 요소에만 적용
• text-align => block 요소가 갖는 속성
  

 

• top: 요소의 baseline을 부모 요소의 top 부분에 맞춤
• bottom: 요소의 baseline을 부모 요소의 bottom 부분에 맞춤
• middle: 요소의 baseline을 부모 요소의 중앙에 위치

See the Pen vertical-align by nadia kwon (@nadia-kwon) on CodePen.

 

• baseline: 요소의 baseline을 부모 요소의 baseline에 맞춤 (기본값)
• text-top: 요소의 top 부분을 부모 요소의 top에 맞춤
• text-bottom: 요소의 bottom 부분을 부모 요소의 bottom에 맞춤
• 길이 or 백분율: 길이 또는 백분율만큼 위나 아래로 이동

See the Pen vertical2 by nadia kwon (@nadia-kwon) on CodePen.

 

---

참고

 

vertical-align - CSS: Cascading Style Sheets | MDN