CSS の垂直方向の配置を深く理解するための詳細な入門書

I 最初の講義:Vertical-Align ファミリは基本的に理解します

Vertical-Align でサポートされる属性値を理解して

プロパティ:

1.Nherit

2. Line

Baseline、TOP、Middle、Bottom

3 . Text

Text-Top、Text-BOTTOM

4. Subsidal クラス

Sub、Super

5 数値パーセンテージ クラス

20px、2em、20%

、すべて負のマージンをサポート、文字間隔、単語間隔、垂直位置揃え、および動作は一貫しています。 対応する数値サイズは、ベースラインの位置合わせに基づいて上下にオフセットされます。

垂直位置合わせのパーセント値は、行の高さを基準にして計算されます。 C versatal-align が垂直整列に作用するための前提条件

垂直整列に対するさまざまな表示値の影響

要素 m IMG SPAN 強い Em

インラインブロック入力

Table-Cell 要素

.table-cell: & lt; td & gt; 表示: 変更要素の表示レベル

2.CSS は、P タグ内の IMG タグを宣言します。垂直方向の配置を設定します: 中央の画像が短すぎます。中央に配置が不十分です

実際の戦闘: 複数行のテキストと画像を垂直方向に中央に配置します

/span>

test.jpg"/>

: :middle }

.test- list > img{vertical-align:middle;}

講義 3 垂直方向の整列と高さの調整

垂直方向の整列のパーセンテージは、ラインに対して相対的に計算されます。高さの値 line-height:30px; vertical-align: -10%; 基本的な現象から導き出すことができます: 垂直

垂直整列: MIDDLE; 36px;

タグアプリケーションを写真より高く設定すると、写真はほぼ垂直になります。

第4章：vertical-align line属性値の詳細 1.inline/inline-block要素：要素の下部と行全体の下部の配置 2.Table-Cell要素。 : Unit Base Padding の端と表の行の下部

垂直整列: 上

垂直-中央

1.inline/Inline-Block 要素: 要素の垂直方向の中心点と親对 对

2.表とセルの要素: 外側の表のセルの塗りつぶしは、外側の表と比較して位置合わせされます。 ️ Vertical-align:text-top/text-bottom

定義

1 . 垂直-Algin: トップ-トップ

ボックスの上部は、親のCentent-Sereaの上部と位置合わせされます。部 ボックスの下部と親レベルのコンテンツ領域の下部

1. 要素の垂直方向の配置の位置は、前後の要素とは関係がありません。フォント サイズについては、実際の効果は絵文字とテキスト (16x16) の配置効果です。 ベースラインを使用する場合の問題は、アイコンが上向きに歪むことです。他の要素の影響を受けるため、位置に大きなずれが生じます

必要なフォント サイズと互換性要件は、第 6 章 上付き文字と下付き文字のみです

1。 . HTML の上付き文字

2. HTML の下付き文字

縮小サイズは元のフォント サイズの 75% です

1.vertical-align:super

親の適切な上付きベースラインに対するベースライン位置。 C 2.Vertical-Align: SUB

は、ボックスのベースラインを親レベルの適切な設定ベースラインまで縮小します。 、

前後に直接の影響はありません

第8章 垂直配置の互換性不良

IE6/7

firefox/chrome

以上がCSS の垂直方向の配置を深く理解するための詳細な入門書の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。