垂直配置プロパティと行ブロックレベル要素の詳細

[垂直位置合わせ](Vertical Align)は、インライン要素またはインラインブロック要素の間で垂直位置合わせを行う方法を指定するプロパティです.
(ブロックレベル要素の属性には適用されません)
The vertical-align property in CSS controls how elements set next to each other on a line are lined up.

img {
  vertical-align: middle;
}

In order for this to work, the elements need to be set along a baseline. As in, inline (e.g. <span> , <img> ) or inline-block (e.g. as set by the display property) elements.
The valid values are:

baseline – This is the default value.

top – Align the top of the element and its descendants with the top of the entire line.

bottom – Align the bottom of the element and its descendants with the bottom of the entire line.

middle – Aligns the middle of the element with the middle of lowercase letters in the parent.

text-top – Aligns the top of the element with the top of the parent element’s font

text-bottom – Aligns the bottom of the element with the bottom of the parent element’s font.

sub – Aligns the baseline of the element with the subscript-baseline of its parent. Like where a <sub> would sit.

super – Aligns the baseline of the element with the superscript-baseline of its parent. Like where a <sup> would sit.

length – Aligns the baseline of the element at the given length above the baseline of its parent. (e.g. px, %, em, rem, etc.)

line-box高さ!=content-area高さ
インライン要素-heightの値がautoの場合、lihe-heightcontent-areaはline-heightと全く同じである.

 <p>
    <span>Ba</span>
    <span>Ba</span>
</p>
p {
    font-family: Catamaran;
    font-size: 100px;
    line-height: 200px;
}

font-family, font-sizeの固定されたline-heightの2人の兄弟<span>の要素を継承する<p>のラベルを持っている.Baselineは一致し、line-boxの高さはline-heightの値と同じである.

](http://wit.nts-corp.com/wp-content/uploads/2017/09/-11)図10.同じフォント値、同じベースライン、すべてがよく見えます.2番目の要素のフォントが小さくなったらどうなりますか?

span:last-child { font-size: 50px; }

変に聞こえますが、下図のようにデフォルトのbaselineソートはもっと高い(!)line-boxを作成できます.
line-boxの高さは、サブ要素の最高点から最低点までを計算する値であることを覚えておいてください.

図11.より小さなサブエレメントはline-boxの高さを高めることができます.
line-heightでは単位なし値を使用することが望ましいの主張があるかもしれませんが、完璧な垂直リズムを作るためにの固定価格が必要です.正直に言うと、何を選んでも、インラインソートの問題に直面します.

.container {
line-height: 300px;
/* 한 줄의 높이를 300px로 적용 */
}

このように、line-hiehgt値を親要素に適用すると、boxの縦ソートアクティビティ領域はcontainerのheightに増加するので、vertical-align: middle;に適用してcontainerの縦中心に位置させることができる.
Vertical alignは、inline、inline block、cell-block要素の垂直整列を担当します.