[HTML] vertical-align 태그

[HTML]
vertical-align 태그

---

✔️ vertical-align 태그

: 인라인 태그 중 하나다.

: 인라인, 인라인 블록 및 테이블의 셀에서 수직 정렬 방식을 지정한다.

❌ 블럭 block 요소에서는 적용되지 않는다.

 

📓 속성값

baseline / sub / super / text-top / text-bottom / middle / top / bottom 등

- 여기서 baseline 이 기본값으로 부모 요소의 기준 선에 맞춘다.

- text-top 은 요소의 맨 위를 부모 font 의 맨 위에 맞춘다.

- middle 은 부모 요소 중앙에 위치한다.

 

 

- 인라인 블록들이 4개가 있다. 4개의 블록들의 내용이 서로 다른 줄이라서 높이가 제각각인 상태!

- vertical-align 으로 수직 정렬해줄 수 있다.

 

<div>
	<div style="background: yellow; width: 100px; display: inline-block; height: 100px; vertical-align: top;">
		A
	</div>
	<div style="background: lightblue; width: 100px; display: inline-block; height: 100px; vertical-align: baseline;">
		B<br>B
	</div>
	<div style="background: green; width: 100px; display: inline-block; height: 100px; vertical-align: middle;">
		C<br>C<br>C
	</div>
	<div style="background: tomato; width: 100px; display: inline-block; height: 100px; vertical-align: bottom;">
		D
	</div>
	
</div>
<br><hr>

💡 top 값을 주면, 모두 위로 정렬된다!