vertical-align(수직 정렬) - Part1

<aside> ☝ 늘 헤깔리던 vertical-align 속성, 초간단 정리

</aside>

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

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

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

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

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

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

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

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

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

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

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