CSS - 垂直方向に整列
ブロック内の非ネイティブ行
説明の便宜のために、我々は、ラインブロックの非ネイティブと呼ばれるインラインブロック要素内の要素に変換しました
単一行/複数行の要素
垂直配向を学習する前に、要素が他のマルチライン要素であり、最初の2つのラインの概念は、単一の線要素を分離する必要性に表示されます。単一ライン要素があります行のようなブロック、TEXTAREA、IMGの非天然：入力、ボタン、スパンは、のような要素が複数の行を有します。そして、我々はトップラインの要素がトップであることを知って、一番下の行が下で、中央のセクションは1ですが、CSSのベースラインは奇妙な説明があります。
ベースラインのシングルライン要素
1.単一行の入力ボックス入力：テキスト入力ボックスにベースライン=ベースライン
2.ボタン（入力ボタンまたはボタン）：ベースライン=ベースラインボタンテキスト
ベースライン=ベースライン本文：他のインライン要素3.span
4.プレーンテキスト：テキスト=ベースラインベースライン
ベースラインマルチライン要素
1.画像：ベースライン=下=ボトム
1.マルチライン入力ボックスTEXTAREA：ベースライン=ボトム=ボトム
2.行のブロック要素（例えば、DIV、スパン）には、非ネイティブを含まない：ベースライン=ボトム=底部、
図3は、非天然ロウブロック要素（例えば、DIV、スパン）の内容を含む：隠された：あなたは、それ自身のベースラインにそれをしたい場合、ベースラインは=、オーバーフロー設定することができるボトムライン、ベースラインを含むコンテンツの最後の行であります
以上のことから、我々は、ベースラインは、テキストのベースラインのシングルライン要素であることがわかりますし、ベースラインの複数行の要素ではなく、それはコンテンツが含まれている場合、ブロック内のネイティブラインよりも、一番下の行で、ベースラインは、その最後の行のベースラインであります
4行の行ボックス
行が行ボックス、及び単一ライン上に並置された複数の要素であり、各要素は、インラインボックスと呼ばれています。トップ=トップライン、線X =行目に見えない、隠されたX =ベースライン、ベースライン（ベースライン= X不可視ボトムライン）、下段=最高インラインボックス底部：ラインボックスは、4本のラインを有します。
ステルスX
Xステルスコンセプトは、偽造に属しますが、それはアライメントパターンを垂直揃える理解するのに役立ちます。
高500pxなどのDIVがある場合、それは設計に応じて、単一のラインまたは複数のラインを有していてもよい、しかし、それはまた、最低の行を有します。各行は行ボックスであり、各ラインボックスは隠れXを有しています。アライメントラインボックスを垂直整列垂直にオフセットされる4本のラインは、第1時間は、念頭に置いて4行Xの行ボックスの概念であると後ろの説明を理解することが目に見えません
目に見えないのx htmlタグは任意の子供を助けるませんが含まれています。また、手動で垂直整列のそれぞれの値とxの効果を試験するために、テキストボックス小文字のx線の中に挿入することができます。
垂直アラインアプリケーションモード
したがって、このプロパティを使用している多くの人々がより多くの驚きの上にあります、非常に混乱人々の特性の一部を垂直に合わせます。たとえば、ライン上のIMGのための垂直整列を設定します。真ん中には、あなたは、このセットは、1本のライン上の他の要素のための有効な持っています。実際には、あなただけの、垂直整列を覚えておく必要があります：あなただけのライン上の特定の要素のベースラインを非垂直揃えを設定した場合、各要素はデフォルトプロパティを持っているベースラインは、これだけでは、この要素に適用されます新しい垂直配向機能、およびアプリケーションのライン上の他の要素はまだベースラインです！これが明確でない場合は、あまりにも狂っ混同されます。デフォルトのベースラインのことを覚えておいてください！手動でプロパティ値を上書きすることができますが、唯一の明示的に設定要素は垂直方向の配置の新しい価値の新機能を使用しますが、他の要素はまだ、ベースラインを変更しないでください。
垂直-alignプロパティ値
値：ベースラインのデフォルト|ピクセル|％|トップ|ミドル|下|スーパー|サブ|テキスト・トップ|テキストボトム
インラインボックス：に設定
継承：しません
値：ベースライン
ベースライン：独自のベースラインに揃え基準線ボックスとしてベースライン時
値： PX | EM | REM ......
PX / EM / REM：ベースライン基準線ボックスがシフトアップされ、ダウン、ベースラインとしてゼロスケールを見ることができ、正のオフセットを取り、負最も近いまでオフセット
値：％
％：ベースライン基準線ボックスを垂直にオフセットされているような、高電流素子の行*％、上向きの正のシフトのパーセンテージ、下方負パーセント偏差
値：トップ（トップライン）|下（下）|ミドル（ニュートラル）
上部/底部/中央：トップ：独自のトップラインアライメント有する基準として上部ワイヤライン・ボックス（トップラインのボックスA）、中央：X正中線が見えない高い行が存在する場合、自身の中心線と基準は、（位置合わせされるようX不可視線がより明白シンク、下部正中線ボックス、より高い高い行に沈むであろう、この状況は）文字シンクと呼ばれ、底：最下行線ボックスは、（それ自身のベースライン基準と整列します行ボックスの一番下の行）はそれで最高のインラインボックスの一番下の行ということです
トップラインに自身を整列する上部、黄色の線ボックスDIVのトップライン：図黄色DIV垂直アラインとして設定されています
図黄色DIV垂直アラインとして設定されている：中間、XのDIVには見えないイエロー中性が自身の中心線と位置合わせされます
図黄色DIV垂直アラインとして設定されている：下、トップDIV黄色ライン、ボトムラインは、親要素のベースラインに対して整列され、その親要素の一番下の行です。
図下段は、一番下の行に整列すべての要素に設定され、黄色の線は、その下の行に他の要素が自分のベースラインに整列し、最高DIVであります
取值：super（上标） | sub（下标）
super/sub：以line box的基线为参照进行上标或下标
作用：类似于html的<sub>、<sup>
取值：text-top （所有文本的顶部）| text-bottom（所有文本的底部）
text-top/text-bottom：以一行上的文本为参照进行上下偏移
垂直对齐相关知识的归纳
关于vertical-align的垂直对齐需要特别注意，所谓vertical-align指的就是容器里有多个inline box（哪怕盒子里只有一个inline box，该inline box所在行都有一个line box的基线，都可以设置vertical-align），这些box需要垂直对齐时，它们都是相对于line box的四条线为基准进行上下偏移。总结以上的各个属性值可以得出：
1.baseline：以自身的基线与line box的基线进行对齐
2.px、em、rem、%、sub、super：以line box的基线为参照进行上下偏移
3.top、middle、bottom：以自身的顶线、中线、底线与line box的顶线、中线、底线对齐。
4.text-top、text-bottom：以自身的顶线或底线与一行上的文本的顶部与底部进行对齐
非原生行内块元素的垂直对齐
这里所说的非原生行内块指的是被转换为行内块的div、span等容器元素，它们比较特殊，如果它们没有包含任何内容，则它们的基线就是它们自身的底线，如果它们包含了内容，则它们的基线是它们包含的最后一行内容的基线。
以下设置了两个行内块div元素，它们没有包含任何内容，所以它们的基线就是自己的底线，默认是baseline对齐，效果如图所示
现在往第二个div里插入文本后，发现效果如下图。这是因为第二个div的基线是它包含的最后一行内容的基线。
