레이아웃 공부를 할 때 position, flex, grid를 배웠으니 이를 이용해서만 레이아웃을 설계했는데, 강의 실습을 하다보니 수직중앙정렬이 안 돼서 한~참 헤맸는데 모범답안을 보니 vertical-align을 사용해서 정렬을 하더라. 강의에서는 못들어본 내용이고 책에서도 보질 못해서 공부해봐야겠다는 생각이 들었다!

vertical-align

inline 또는 table-cell box에서의 수직 정렬을 지정.
해당 요소가 부모 요소의 기준선에 상대적으로 어떻게 수직 정렬되는지를 설정.

selector {
    vertical-align: /* value */
}

속성 값

baseline

초기값. 해당 요소의 하단을 부모 요소의 baseline을 기준으로 맞춰 정렬.
baseline이 없으면 부모 요소의 아래쪽 가장자리를 기준으로 맞춰 정렬.
인라인블록에 여러줄의 텍스트가 있는 경우에는 마지막 라인박스, 즉, 마지막 줄의 baseline을 해당 요소의 baseline으로 봄

middle

부모 요소의 x-height의 중간점(0.5ex)을 기준으로 수직 가운데 정렬.
vertical영역의 중간이 아닌 알파벳 소문자의 중간이 middle값. 폰트 종류가 바뀌게 되면 middle값도 상대적으로 바뀌게 됨.
모든 요소의 가운데를 맞추기 위해서는 모든 요소에 vertical-align: middle을 설정해주면 됨.

sub / super

부모 요소의 아래/위 첨자 기준으로 정렬. (이 값은 요소 텍스트의 글꼴 크기에 영향을 미치지 않습니다.)

text-top / text-bottom

해당 요소의 상단/하단을 부모 요소의 텍스트 상단/하단에 맞춰 정렬합니다.

top / bottom

해당 요소의 상단/하단을 위쪽/아래쪽 가장자리에 맞춰 정렬합니다.

기타

%, px 등을 사용할 수도 있음.

사용주의 1

  .box1 {
    width: 100px;
    height: 100px;
    display: inline-block;
    vertical-align: middle;
    background-color: yellow;
  }
  
  .box2 {
    width: 100px;
    height: 50px;
    display: inline-block;
    vertical-align: middle;
    background-color: green;
  }
  
  .box3 {
    width: 100px;
    height: 70px;
    display: inline-block;
    vertical-align: middle;
    background-color: blue;
  }

다음과 같은 box는 아래와 같이 출력되고 있다.

  .box1 {
    width: 100px;
    height: 100px;
    display: inline-block;
    vertical-align: middle;
    background-color: yellow;
    vertical-align: top;
  }

box1에 vertical-align: top 설정을 두게 되면 다음과 같이 변하게 된다.

box1에 설정을 주었는데, 왜 box2, box3이 움직이게 되는 것일까?
box1을 제외한 요소중에 가장 높은 곳을 기준으로 정렬이 되기 때문이다.
그렇기에 box3이 위로 올라오게 되고, box2와 box3은 vertical-align을 설정해주지 않았기 때문에 기본값인 baseline에 맞춰지게 되어 box2가 올라오게 된다.
즉, baseline은 vertical-align의 조건들을 충족시키면서 줄의 높이가 최소가 되는 곳에 위치.

사용주의 2

<style>
  .container {
    width: 300px;
    height: 300px;
    background-color: red;
  }

  .box {
    width: 100px;
    height: 100px;
    display: inline-block;
    vertical-align: middle;
    background-color: yellow;
  }
</style>

<div class="container">
    <div class="box"></div>
  </div>

아래와 같은 코드가 있을 때 vertical-align에 의해 세로 중앙 정렬이 될거라고 생각하지만,

실제 출력은 위와 같다.
이때, 다음과 같이 line-heihgt를 container에 추가해주면 된다.

  .container {
    width: 300px;
    height: 300px;
    background-color: red;
    line-height: 300px;
  }

line-height 속성은 자식들에게 상속되기 때문에 자식들에게 line-height: normal;을 써준다.

참고 자료

CSS vertical-align 속성 완벽 가이드