CSS vertical-align: 인라인 요소 및 표 칸 수직 정렬

CSS vertical-align 속성은 인라인, 인라인 블록 요소와 표 칸의 수직 정렬 방법을 설정합니다.

svg {
  vertical-align: top;
  /* vertical-align: middle; */
  /* vertical-align: baseline; */
  /* vertical-align: sub; */
  /* vertical-align: bottom; */
}

<div class="outer">
  <div class="position">
    <p>
      <span>도움말</span>
      <svg width="15" height="15" viewBox="0 0 15 15" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M0.877075 7.49972C0.877075 3.84204 3.84222 0.876892 7.49991 0.876892C11.1576 0.876892 14.1227 3.84204 14.1227 7.49972C14.1227 11.1574 11.1576 14.1226 7.49991 14.1226C3.84222 14.1226 0.877075 11.1574 0.877075 7.49972ZM7.49991 1.82689C4.36689 1.82689 1.82708 4.36671 1.82708 7.49972C1.82708 10.6327 4.36689 13.1726 7.49991 13.1726C10.6329 13.1726 13.1727 10.6327 13.1727 7.49972C13.1727 4.36671 10.6329 1.82689 7.49991 1.82689ZM8.24993 10.5C8.24993 10.9142 7.91414 11.25 7.49993 11.25C7.08571 11.25 6.74993 10.9142 6.74993 10.5C6.74993 10.0858 7.08571 9.75 7.49993 9.75C7.91414 9.75 8.24993 10.0858 8.24993 10.5ZM6.05003 6.25C6.05003 5.57211 6.63511 4.925 7.50003 4.925C8.36496 4.925 8.95003 5.57211 8.95003 6.25C8.95003 6.74118 8.68002 6.99212 8.21447 7.27494C8.16251 7.30651 8.10258 7.34131 8.03847 7.37854L8.03841 7.37858C7.85521 7.48497 7.63788 7.61119 7.47449 7.73849C7.23214 7.92732 6.95003 8.23198 6.95003 8.7C6.95004 9.00376 7.19628 9.25 7.50004 9.25C7.8024 9.25 8.04778 9.00601 8.05002 8.70417L8.05056 8.7033C8.05924 8.6896 8.08493 8.65735 8.15058 8.6062C8.25207 8.52712 8.36508 8.46163 8.51567 8.37436L8.51571 8.37433C8.59422 8.32883 8.68296 8.27741 8.78559 8.21506C9.32004 7.89038 10.05 7.35382 10.05 6.25C10.05 4.92789 8.93511 3.825 7.50003 3.825C6.06496 3.825 4.95003 4.92789 4.95003 6.25C4.95003 6.55376 5.19628 6.8 5.50003 6.8C5.80379 6.8 6.05003 6.55376 6.05003 6.25Z" fill="currentColor" fill-rule="evenodd" clip-rule="evenodd"></path></svg>
    </p>
    <p class="lines">
      <span class="ind text-top" data-label="text-top"></span>
      <span class="ind middle" data-label="middle"></span>
      <span class="ind baseline" data-label="baseline"></span>
      <span class="ind text-bottom" data-label="text-bottom"></span>
    </p>
  </div>
</div>

<div class="outer">
  <p>
    <span>도움말</span>
    <svg width="15" height="15" viewBox="0 0 15 15" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M0.877075 7.49972C0.877075 3.84204 3.84222 0.876892 7.49991 0.876892C11.1576 0.876892 14.1227 3.84204 14.1227 7.49972C14.1227 11.1574 11.1576 14.1226 7.49991 14.1226C3.84222 14.1226 0.877075 11.1574 0.877075 7.49972ZM7.49991 1.82689C4.36689 1.82689 1.82708 4.36671 1.82708 7.49972C1.82708 10.6327 4.36689 13.1726 7.49991 13.1726C10.6329 13.1726 13.1727 10.6327 13.1727 7.49972C13.1727 4.36671 10.6329 1.82689 7.49991 1.82689ZM8.24993 10.5C8.24993 10.9142 7.91414 11.25 7.49993 11.25C7.08571 11.25 6.74993 10.9142 6.74993 10.5C6.74993 10.0858 7.08571 9.75 7.49993 9.75C7.91414 9.75 8.24993 10.0858 8.24993 10.5ZM6.05003 6.25C6.05003 5.57211 6.63511 4.925 7.50003 4.925C8.36496 4.925 8.95003 5.57211 8.95003 6.25C8.95003 6.74118 8.68002 6.99212 8.21447 7.27494C8.16251 7.30651 8.10258 7.34131 8.03847 7.37854L8.03841 7.37858C7.85521 7.48497 7.63788 7.61119 7.47449 7.73849C7.23214 7.92732 6.95003 8.23198 6.95003 8.7C6.95004 9.00376 7.19628 9.25 7.50004 9.25C7.8024 9.25 8.04778 9.00601 8.05002 8.70417L8.05056 8.7033C8.05924 8.6896 8.08493 8.65735 8.15058 8.6062C8.25207 8.52712 8.36508 8.46163 8.51567 8.37436L8.51571 8.37433C8.59422 8.32883 8.68296 8.27741 8.78559 8.21506C9.32004 7.89038 10.05 7.35382 10.05 6.25C10.05 4.92789 8.93511 3.825 7.50003 3.825C6.06496 3.825 4.95003 4.92789 4.95003 6.25C4.95003 6.55376 5.19628 6.8 5.50003 6.8C5.80379 6.8 6.05003 6.55376 6.05003 6.25Z" fill="currentColor" fill-rule="evenodd" clip-rule="evenodd"></path></svg>
  </p>
</div>

.outer {
  border: 1px solid black;
  padding: 1rem;
  width: fit-content;
}
.outer + .outer {
  margin-top: 1rem;
}

.position {
  outline: 1px solid lightgray;
  position: relative;
}

.lines {
  width: 100%;
  color: transparent;
  margin: 0;
  position: absolute;
  top: 0;
  left: 0;
}

.ind {
  width: 0;
  height: 1px;
  display: inline-block;
  opacity: 0.85;
  position: relative;
}
.ind::before {
  border-top: 2px dashed currentColor;
  bottom: 0;
  content: '';
  left: 0;
  /* outline: 0.5px solid currentColor; */
  position: absolute;
  top: 0;
  width: 10rem;
}
.ind::after {
  bottom: 0;
  content: attr(data-label);
  font-size: 10px;
  left: 10rem;
  position: absolute;
  white-space: nowrap;
  width: fit-content;
}

.ind.text-top {
  color: red;
  vertical-align: text-top;
}
.ind.middle {
  color: green;
  vertical-align: middle;
}
.ind.baseline {
  color: blue;
  vertical-align: baseline;
}
.ind.text-bottom {
  color: purple;
  vertical-align: text-bottom;
}

p {
  font-size: 2em;
}

불러오는 중...

vertical-align은 두 가지 상황에서 사용할 수 있습니다.

인라인 요소 박스를 컨테이너의 줄 박스 기준으로 수직 정렬할 때. 즉, 인라인 요소 자신의 수직 정렬법을 설정합니다. 예를 들어, 텍스트 줄 내에 삽입된 이미지를 정렬할 수 있습니다.
표 칸(display: table-cell)의 콘텐츠를 수직 정렬할 때. 위와는 반대로 요소 자신이 아니라 요소 내의 콘텐츠를 정렬합니다.

블록 요소의 수직 정렬에는 vertical-align을 사용할 수 없습니다.

구문

/* 키워드 값 */
vertical-align: baseline;
vertical-align: sub;
vertical-align: super;
vertical-align: text-top;
vertical-align: text-bottom;
vertical-align: middle;
vertical-align: top;
vertical-align: bottom;

/* <length> 값 */
vertical-align: 10em;
vertical-align: 4px;

/* <percentage> 값 */
vertical-align: 20%;

/* 전역 값 */
vertical-align: inherit;
vertical-align: initial;
vertical-align: revert;
vertical-align: revert-layer;
vertical-align: unset;

vertical-align은 다음 값 중 하나를 사용해 지정할 수 있습니다.

인라인 요소 정렬용 값

부모 상대 값

이 값들은 부모 요소에 상대적인 위치로 수직 정렬합니다.

baseline: 요소의 기준선을 부모 요소의 기준선에 맞춥니다. <textarea> 등 일부 대체 요소들의 기준선은 HTML 명세에서 정의하지 않았으므로, 대체 요소에 이 키워드를 사용하는 경우 브라우저마다 결과가 다를 수 있습니다.
sub: 요소의 기준선을 부모의 아래 첨자 기준선에 맞춥니다.
super: 요소의 기준선을 부모의 위 첨자 기준선에 맞춥니다.
text-top: 요소의 위를 부모의 글꼴 상단에 맞춥니다.
text-bottom: 요소의 아래를 부모의 글꼴 하단에 맞춥니다.
middle: 요소의 가운데를 부모의 기준선으로부터 부모 x-height¹ 절반만큼 위로 올려 정렬합니다.
<length>: 요소의 기준선을 부모의 기준선으로부터 지정한 길이만큼 위로 올려 정렬합니다. 음수를 사용할 수 있습니다.
<percentage>: 요소의 기준선을 부모의 기준선으로부터 지정한 백분율(부모의 line-height 기준)만큼 위로 올려 정렬합니다. 음수를 사용할 수 있습니다.

줄 상대 값

이 값들은 요소가 위치한 줄에 상대적인 위치로 수직 정렬합니다.

top: 요소와 자손들의 제일 위쪽 경계를 줄 전체의 위에 맞춥니다.
bottom: 요소와 자손들의 제일 아래쪽 경계를 줄 전체의 아래에 맞춥니다.

overflow: hidden 등의 속성에 의해 기준선을 갖지 않는 요소들은 하단 바깥 여백 경계를 사용해 정렬합니다.

표 칸 정렬용 값

baseline: 이 칸이 속한 행 내의 다른 기준선 정렬 칸들과 기준선을 맞춥니다.
top: 칸의 상단 안쪽 여백 경계를 행의 상단에 맞춥니다.
middle: 칸의 안쪽 여백 상자를 행 내에서 가운데로 정렬합니다.
bottom: 칸의 하단 안쪽 여백 경계를 행의 하단에 맞춥니다.

다른 값들은 유효하지 않으며 baseline으로 취급합니다.

예제

표 칸의 수직 정렬

이 예제에서는 6칸짜리 표를 사용해 각 정렬 키워드의 동작을 보입니다.

왼쪽 네 개의 칸이 각 키워드의 예제입니다. 다섯 번째 칸(“큰 글씨”)은 기준선을 낮추기 위해 큰 글씨를 적용했고, 여섯 번째 칸은 수직 정렬을 위해 행의 높이를 키울 용도입니다.

다섯 번째 칸의 큰 글씨로 인해 기준선이 내려갔고, 다섯 번째 칸 또한 기준선 정렬 중이므로, 첫 번째 칸의 내용이 다섯 번째 칸 기준선에 맞추기 위해 아래로 내려간 모습을 확인할 수 있습니다. 다섯 번째 칸의 class 특성이 big만 가지도록 수정해보세요. 내려간 기준선이 없어지므로 첫 번째 칸의 내용이 위로 올라갈 것입니다.

<table>
  <tr class="bottom">
    <td class="baseline">baseline</td>
    <td class="top">top</td>
    <td class="middle">middle</td>
    <td class="bottom">bottom</td>
    <td class="big baseline">큰 글씨</td>
    <td>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse
      pretium felis eu sem mattis vulputate.
    </td>
  </tr>
</table>

.baseline {
  vertical-align: baseline;
}

.top {
  vertical-align: top;
}

.middle {
  vertical-align: middle;
}

.bottom {
  vertical-align: bottom;
}

.big {
  white-space: nowrap;
}

table {
  font-size: 14px;
}

td {
  border: 1px solid black;
}

.big {
  font-size: 20px;
}

불러오는 중...

명세

CSS 2

브라우저 호환성

MDN `browser-compat-data`
	데스크톱			모바일
	데스크톱			iOS	Android
	Safari	Chrome	Firefox	Safari	Chrome	Firefox	Samsung Internet
`vertical-align`
`baseline`
`bottom`
`middle`
`sub`
`super`
`text-bottom`
`text-top`
`top`

각주

소문자 x의 높이입니다. 1ex와 같습니다. ↩