vertical-align(수직 정렬) - Part1

1.inline/inline-block 요소 간의 수직 정렬
2.테이블 셀 요소 내부의 수직 정렬 (다음 글)

• 기본 구문 : vertical-align: middle; (top, middle, botom 등이 있으며) default 값은 middle이다.

1.inline/inline-block 요소 간의 수직 정렬

vertical-align을 적용하지 않았을 때의 default 값은 middle로 설정 되어 있다

<style>
  div>p {font-size: 50px;}
  span {font-size: 20px;}
</style>
<div>
  <p>vertical-align<span>정렬</span></p>
</div>

---

top을 주었을 때 정렬이 위로 올라간 것을 확인

<div>
  <p>vertical-align<span style="vertical-align: top;">정렬</span></p>
</div>

---

bottom을 주었을 때 정렬이 아래로 올라간 것을 확인

<div>
  <p>vertical-align<span style="vertical-align: bottom;">정렬</span></p>
</div>

---

이러한 특성을 이용하면 2의 제곱 이런 형태도 쉽게 표현 가능

  <p>2<span style="vertical-align: text-top;">2</span></p>

 

노션으로 보고 싶다면?

https://short-echidna-b16.notion.site/vertical-align-Part1-9a34474520ed422082f589d1bdc1285e?pvs=4

vertical-align(수직 정렬) - Part1 | Notion