[HTML] vertical-align 태그
by mini_min[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 값을 주면, 모두 위로 정렬된다!
블로그의 정보
개발자 미니민의 개발로그
mini_min