vertical-align
Baseline Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.
vertical-align CSS 속성은 inline 또는 table-cell box에서의 수직 정렬을 지정합니다.
시도해 보기
vertical-align: baseline;
vertical-align: top;
vertical-align: middle;
vertical-align: bottom;
vertical-align: sub;
vertical-align: text-top;
<section class="default-example" id="default-example">
<p>
Align the star:
<img id="example-element" src="/shared-assets/images/examples/star2.png" />
</p>
</section>
#default-example > p {
line-height: 3em;
font-family: monospace;
font-size: 1.2em;
text-decoration: underline overline;
}
vertical-align 속성은 두 가지 상황에서 사용할 수 있습니다.
- 인라인 요소의 상자를 선 상자를 포함해 자기 자신 안에 수직으로 정렬합니다. 예를 들어, 텍스트 줄에 이미지를 세로로 배치하는 데 사용할 수 있습니다.
- 테이블 셀 내용을 정렬합니다.
vertical-align은 인라인, 인라인 블록 및 테이블 셀 요소에만 적용되므로 블록 레벨 요소를 수직으로 정렬하는 데 사용할 수 없습니다.
구문
/* Keyword values */
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> values */
vertical-align: 10em;
vertical-align: 4px;
/* <percentage> values */
vertical-align: 20%;
/* Global values */
vertical-align: inherit;
vertical-align: initial;
vertical-align: revert;
vertical-align: revert-layer;
vertical-align: unset;
vertical-align 속성은 아래 나열된 값 중 하나로 지정됩니다.
인라인 요소의 값
부모-상대 값
다음 값은 요소를 부모 요소에 대해 수직으로 정렬합니다.
baseline-
부모의 baseline에 맞추어 해당 엘리먼트의 baseline 을 정렬합니다. 몇몇 replaced elements의 베이스라인은 예를들면
<textarea>은 HTML 명세에 정의되어 있지 않으므로, 이 키워드는 브라우저마다 다른 결과를 보여줍니다. sub-
해당 엘리먼트의 baseline을 부모의 subscript-baseline으로 정렬합니다.
super-
해당 엘리먼트의 baseline을 부모의 superscript-baseline으로 정렬합니다.
text-top-
해당 엘리먼트의 top을 부모 엘리먼트 폰트의 top으로 정렬합니다.
text-bottom-
해당 엘리먼트의 bottom을 부모 엘리먼트 폰트의 bottom으로 정렬합니다.
middle-
해당 엘리먼트의 middle을 부모의 baseline + x-height / 2 로 정렬합니다.
<length>-
해당 엘리먼트의 baseline을 부모의 baseline에서 주어진 길이만큼 위로 정렬합니다.
<percentage>-
<length> value와 마찬가지로 해당 엘리먼트의 baseline을 부모의 baseline에서
line-height의 퍼센트로 주어진 퍼센트만큼 위로 정렬합니다.
선-상대 값
다음 값은 요소를 전체 선을 기준으로 수직으로 정렬합니다.
top-
해당 엘리먼트의 top과 이것의 자손들의 top을 전체 라인의 top으로 정렬합니다.
bottom-
해당 엘리먼트의 bottom과 이것의 자손들의 bottom을 전체 라인의 bottom으로 정렬합니다.
Baseline이 없는 엘리먼트에 대해서는 bottom margin edge가 baseline을 대신하여 사용됩니다.
테이블 셀 값
baseline(sub,super,text-top,text-bottom,<length>,<percentage>)-
셀의 baseline을 같은 행의 다른 cell들의 baseline과 정렬합니다.
top-
셀의 top padding edge를 행의 top으로 정렬합니다.
middle-
셀의 padding box의 중심을 행에서 중앙 정렬합니다.
bottom-
셀의 bottom padding edge를 행의 bottom으로 정렬합니다.
음수 값이 허용됩니다.
형식 정의
| 초기값 | baseline |
|---|---|
| 적용대상 | inline-level and table-cell elements. It also applies to ::first-letter and ::first-line. |
| 상속 | no |
| Percentages | refer to the line-height of the element itself |
| 계산 값 | for percentage and length values, the absolute length, otherwise the keyword as specified |
| Animation type | a length |
형식 구문
vertical-align =
[ first | last ] ||
<'alignment-baseline'> ||
<'baseline-shift'>
<alignment-baseline> =
baseline |
text-bottom |
alphabetic |
ideographic |
middle |
central |
mathematical |
text-top
<baseline-shift> =
<length-percentage> |
sub |
super |
top |
center |
bottom
<length-percentage> =
<length> |
<percentage>
예제
기본 예제
HTML
<div>
An <img src="frame_image.svg" alt="link" width="32" height="32" /> image with
a default alignment.
</div>
<div>
An
<img class="top" src="frame_image.svg" alt="link" width="32" height="32" />
image with a text-top alignment.
</div>
<div>
An
<img class="bottom" src="frame_image.svg" alt="link" width="32" height="32" />
image with a text-bottom alignment.
</div>
<div>
An
<img class="middle" src="frame_image.svg" alt="link" width="32" height="32" />
image with a middle alignment.
</div>
CSS
img.top {
vertical-align: text-top;
}
img.bottom {
vertical-align: text-bottom;
}
img.middle {
vertical-align: middle;
}
결과
선 상자의 수직 정렬
HTML
<p>
top: <img style="vertical-align: top" src="star.png" /><br />
middle: <img style="vertical-align: middle" src="star.png" /><br />
bottom: <img style="vertical-align: bottom" src="star.png" /><br />
super: <img style="vertical-align: super" src="star.png" /><br />
sub: <img style="vertical-align: sub" src="star.png" /><br />
</p>
<p>
text-top: <img style="vertical-align: text-top" src="star.png" /><br />
text-bottom: <img style="vertical-align: text-bottom" src="star.png" /><br />
0.2em: <img style="vertical-align: 0.2em" src="star.png" /><br />
-1em: <img style="vertical-align: -1em" src="star.png" /><br />
20%: <img style="vertical-align: 20%" src="star.png" /><br />
-100%: <img style="vertical-align: -100%" src="star.png" /><br />
</p>
결과
테이블 셀의 수직 정렬
HTML
<table>
<tr>
<td style="vertical-align: baseline">baseline</td>
<td style="vertical-align: top">top</td>
<td style="vertical-align: middle">middle</td>
<td style="vertical-align: bottom">bottom</td>
<td>
<p>
There is a theory which states that if ever anyone discovers exactly
what the Universe is for and why it is here, it will instantly disappear
and be replaced by something even more bizarre and inexplicable.
</p>
<p>
There is another theory which states that this has already happened.
</p>
</td>
</tr>
</table>
CSS
table {
margin-left: auto;
margin-right: auto;
width: 80%;
}
table,
th,
td {
border: 1px solid black;
}
td {
padding: 0.5em;
font-family: monospace;
}
결과
명세
| Specification |
|---|
| CSS Inline Layout Module Level 3 # propdef-vertical-align |