css vertical-align

vertical-align 속성은 inline 요소나 table-cell box의 수직정렬을 제어할 수 있습니다.

 

주로 사용하는 것들만 알아보겠습니다.

 

vertical-algin: baseline;

vertical-align: top;

vertical-align: middle;

vertical-align: bottom;

 

baseline

=> 부모의 baseline에 맞추어서 inline 요소를 수직정렬 시켜줍니다.

 

top

=> 부모의 top에 맞추어서 inline 요소를 수직정렬 시켜줍니다.

 

middle

=> 부모의 baseline + x-height/2 에 맞추어서 inline 요소를 수직정렬 시켜줍니다.

정확히 중앙은 아닐수 있겠네요

 

bottom

=> 부모의 bottom에 맞추어서 inline 요소를 수직정렬 시켜줍니다.

 

 

 

inline 요소를 위치시킬때 유용하게 사용할 수 있을것 같습니다.

 

 

 

See the Pen vertical-align by 정우병 (@woobottle) on CodePen.

 

 

 

 

 

 

 

https://developer.mozilla.org/ko/docs/Web/CSS/vertical-align

vertical-align - CSS: Cascading Style Sheets | MDN